kodyl / react-flexr Goto Github PK

Cell stuff works but so far can't get Grid's flexCells, hAlign, align to have any effect when set.

This is in Chrome on a windows 8.1 box.

Does this not work using React 15? I'm trying to run the optimizedResize.init() function the way the app suggests and I'm getting: "index.js:114 Uncaught TypeError: callbacks.setItem is not a function"

When I resize the window I get: "index.js:106 Uncaught TypeError: callbacks.values(...).forEach is not a function"

Everything else works great

I am using react-flexr on Meteor 1.3.1. The Grdi is working well, columns are OK and resize when I resize the window, and cell alignment also works. However, the breakpoints have no effect, grid is non responsive.

Here is the code:

import React from 'react';
...
import { Grid, Cell } from 'react-flexr';
import '/node_modules/react-flexr/styles.css';

class Profile extends React.Component {
....
render() {

    return (
      <div>
        <AppBar className={style.appbar} flat>
          <h1 className={style.title}>React Toolbox Example</h1>
        </AppBar>
        <section className={style.content}>
          <Grid>
            <Cell align='top' size={4/12} palm={6/12}>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor.Aenean massa.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.Nulla consequat massa quis enim.
            </Cell>
            <Cell align='center' size={4/12} palm={6/12}>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            </Cell>
            <Cell align='bottom' size={4/12} palm={6/12}>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor.Aenean massa.Cum sociis natoque penatibus et magnis dis parturient montes
            </Cell>
          </Grid>
        </section>
      </div>    
    );
  }
}
export default Profile;

Do I need to import something else or set the breakpoints somewhere?? Thanks for any help.

babel-runtime is called out in package.json under devDependencies, but it's referenced by name in https://github.com/kodyl/react-flexr/blob/master/dist/index.js#L7 and is thus a run time dependency. It should be in package.json under dependencies to be sure all run time dependencies install correctly.

Hi,

I'm relatively new to React, so forgive me if this is a dumb question...

When I break apart my components into separate files, and only use the top level Grid in one file and the Cell in another, the code won't work unless I import both at the top.

Webpack then fires off a load of warnings in the console about warning 'Cell' is defined but never used no-unused-vars.

It's not breaking anything, but it's a bit annoying when you have similar arrangements across lots of files. Short of switching off the warnings (the rest of which are quite useful), is there a 'right' way of fixing this?

Thanks.

Same as #11 but for the flexCells prop for the Grid element.

<Grid
  flexCells={ bool }  // All sub cells will be full height
/>

When I try to use this it breaks my text alignment, which seems to be caused by the <div> losing it's width, and doesn't actually distribute height equally. I've tried <Grid flexCells={ true } ... or <Grid flexCells="true" ...
Am I missing something simple?

Would it be possible to have a cell with a fixed size (i.e 100px) or is there already a way of handling that? Currently only fractions are supported ,and my sidebar (who have a fixed width) needs to be contained in a custom div in the grid rather than in a cell.

Example:

<Cell palm="100px" lap="200px" desk="300px" />

How to set direction?

I am having a problem where react-flexr doesn't work in safari on a tablet and "solved by flexbox" works on safari. It seems like webkits aren't specified for the Grid. (reference : https://github.com/kodyl/react-flexr/blob/master/lib/grid.component.js#L9)

1. Is each <Grid> intended to represent a row? In your demos you have one <Grid> and many <Cell>s, however if you test this out, you don't see the behaviour that you are suggesting in the example. For example when you have the example for:

<Grid>
    <Cell size='6/12'>
        Fills Half
    </Cell>
    <Cell>
        Fills Rest.. (Yay for Flexbox)
    </Cell>
    <Cell size={200} lap={150}>
        Fills 150px on lap and 200px everywhere else
    </Cell>

You end up with all 3 cells in the first row and the remaining ones staggered in distribution. I am just wondering because when I read "Fills rest" I'm assuming it would fill the rest of the available space. Instead you get an additional cell in the row of 150px (lap).

2. I'm also trying to understand the -11px margin left/right gutter on the <Grid> element. Is the intension that the outer <Grid> is wrapped in a .container with an 11px padding left/right?

Any insight is appreciated.
Jamie

Hi, i have been playing around for a while and i am having a hard time coming up with a footer concept with this grid system. It seems aligning cells or grid to the bottom doesn't have any effect.

This gives lots of warnings in React 0.15:

warning.js:44 Warning: Unknown propdeskon <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Also, perhaps this is by design, but when resizing manually by dragging the window, the ergonomics breakpoints aren't triggered until I reload the page at the new size... related?