React-grid-layout: Width and Height on layout items being ignored

[clough360]

My items are always displayed with the default width and height (1,1)

I create the layout array (direct extract from the docs) as follows:
```
this.state.layout = generateLayout() {
return [
{i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
{i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
{i: 'c', x: 4, y: 0, w: 1, h: 2}
];

and then render as follows:

render() {
layout={this.state.layout}
{...this.props}
>
{this.generateDOM()}

);
}
```

If I log the layout at the start of the render method, it is correct:

However, upon render, the onLayoutChange event, it is immediately called with 'reset' width and height of 1,1:

What am I missing?

[daynin]

@clough360 pls, try to add "measureBeforeMount" prop into your React`GridLayout instance props

<ReactGridLayout
   layout={this.state.layout}
   {...this.props}
   measureBeforeMount
>
  {this.generateDOM()}
</ReactGridLayout>

Let me know if it helps

[clough360]

Unfortunately that didn’t work.
I’ll see if I can put together a minimal example.

[MichaelFroeschen]

Unfortunately this is not a question, but actually a bug.
The issue is, that the layout is cached and re-used without merging any changes into the cached layout item.

See
https://github.com/STRML/react-grid-layout/blob/a0936f7ba5b6d88c324b4fa531ec6a54de06946e/lib/utils.js#L600-L603
Thus, if the layout changes programmatically, it will not be reflected by the grid.

An example of this issue can be found here: https://codesandbox.io/s/funny-borg-9nxt8

[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

[MichaelFroeschen]

This i still an issue...

[kujohn]

@clough360 pls, try to add "measureBeforeMount" prop into your React`GridLayout instance props

<ReactGridLayout
   layout={this.state.layout}
   {...this.props}
   measureBeforeMount
>
  {this.generateDOM()}
</ReactGridLayout>

Let me know if it helps

This worked when working with passing layout to the GridLayout. It did not work with data-grid attribute.

[C-likethis123]

I was facing a similar issue, where the width and height on my layout items were being ignored on my <ResponsiveGridLayout>. I fixed this by specifying the data-grid attribute.