React-grid-layout: Predefined layouts not generating correctly if DOM elements aren't in the right vertical order.

[matthewbpt]

I've found an issue where if DOM elements inside the ReactGridLayout element are not in the same vertical order as defined in the layout, the layout is not generated correctly.

See example here http://codepen.io/matthewbpt/pen/xOOveN?editors=1010

According to the _grid layouts of each widthet, widget "One" should be above "Two", but "One" is rendered below "Two"! If you put "One" above "Two" in the HTML then the layout is rendered correctly. Surely the position of the elements should rely entirely on the layout settings in the _grid option, rather than the order of the items in the HTML.

[mclarentgp]

I've also encountered this issue and it appears to have something to do with the prop verticalCompact being set to true on initial load of the layout.

Even though widget "Two" has its y coordinate set to 5 because the prop verticalCompact is defaulted to true it ends up changing the y coordinate to 0 for widget "Two" and thus gets rendered above widget "One".

From what I can tell the y coordinate for widget "Two" is being change to 0 in the function synchronizeLayoutWithChildren in utils.jsx in this specific line of code,
// Validated; add it to the layout. Bottom 'y' possible is the bottom of the layout. // This allows you to do nice stuff like specify {y: Infinity} if (verticalCompact) { newItem = cloneLayoutItem(_extends({}, g, { y: Math.min(bottom(layout), g.y), i: child.key })); } else { newItem = cloneLayoutItem(_extends({}, g, { y: g.y, i: child.key })); }

I was also able to set verticalCompact = false in your example that you provided and was then able to get widget "Two" to render under widget "One". Although since verticalCompact is a prop and you cannot modify and set it to true after the initial render maybe there needs to be something that will accept the provided y coordinate on initial load instead of looking to see that verticalCompact is set to true, but only on initial load.

[larrydahooster]

I had the same problem and I simply sort the grid Items by y coordinate before I pass them to the Grid. Feels a bit hacky. Maybe the grid should take care of it before generating the layout?

[lesterzone]

I have a similar issue,
When Grid A is rendered, it works properly, then I navigate to Grid B route (using react-router). B is not rendered properly unless I reload the page. ( I'm using hashHistory ).
Issue persist even when using @larrydahooster's suggested approach

Any ideas? I'm preparing a reproducible steps with a fiddle.

[eklingman]

+1

[bradennapier]

+1

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days