React-grid-layout: Can it do variable height?

[winkler1]

If you get a chance, would love an example with variable-height images, as in hearsay.me or react.rocks. Basic markup, with Bootstrap:

 <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <a href={this.getArticleLink()} className='thumbnail article'>
   <img src='whatever'>

Thanks!

[STRML]

In order for this to work properly with moveable widgets, we need to know the height of every widget, which we can only know after the image loads.

It might be possible if you set the rowHeight to a very low number (1 or 2px), and update the internal layout on every img load event.

[phchang]

@winkler1 I'm not sure if you're still looking for an answer...

I have a similar situation where I'm trying to integrate the react-grid-layout into my project with a variable number of widgets. Each widget loads with a spinner and then fetches data from different endpoints that result in variable size content. The result is that the nested child in GridItem either overlaps other widgets or doesn't take up enough space to "fill" the GridItem.

I'll disclaim that I'm new to React, so I'm not sure if this is the best pattern...

I have a React component that renders the ReactGridLayout. It stores the layout array in the state. A callback is passed into the child ("widget") component via props. Once it renders, the callback is called with this.getDOMNode().offsetHeight/offsetWidth as parameters. The callback then computes the dimensions in grid units (similar to GridItem.calcWH(..)) and updates the state. The grid re-renders and the spacing looks correct.

[STRML]

That sounds like a good way to do it. You're going to have to reach into
the DOM, there's no other way to know how large the item will render in
the DOM until you render it. There could be images, variable length
text, variable widths, etc. This is one of those cases where if you want
a perfect server render, you're going to have to either use something
else or render in PhantomJS.

On 5/6/15 5:26 PM, phchang wrote:

@winkler1 https://github.com/winkler1 I'm not sure if you're still
looking for an answer...

I have a similar situation where I'm trying to integrate the
react-grid-layout into my project with a variable number of widgets.
Each widget loads with a spinner and then fetches data from different
endpoints that result in variable size content. The result is that the
nested child in |GridItem| either overlaps other widgets or doesn't
take up enough space to "fill" the |GridItem|.

I'll disclaim that I'm new to React, so I'm not sure if this is the
best pattern...

I have a React component that renders the |ReactGridLayout|. It stores
the |layout| array in the |state|. A callback is passed into the child
("widget") component via |props|. Once it renders, the callback is
called with |this.getDOMNode().offsetHeight/offsetWidth| as a
parameters. The callback then computes the dimensions in grid units
(similar to |GridItem.calcWH(..)|) and updates the |state|. The grid
re-renders and the spacing looks correct.

—
Reply to this email directly or view it on GitHub
https://github.com/STRML/react-grid-layout/issues/2#issuecomment-99629697.

[stanleycyang]

@STRML How does the calculation work with the rowHeight and the GridItem h? Even if I set the rowHeight to 1 the calculations are always way off. I've also tried changing the padding and margin to [1,1]

[scottellis64]

@phchang Would you mind sharing your solution for dynamic resizing? I have the same issue--this widget is perfect for my needs but the heights are dynamic--if I could fix the layout to match then I would be in good shape.