React-grid-layout: Grid initial rendering issue

[saravanannnallasamy]

I have used react-grid-layout(@0.13.5) in my previous projects. It just worked fine.
In my current project, when screen is loaded the grids are arranged in stack of items instead of in a linear manner.

When i use Inspect(ctrl+shift+i) or drag the inspect window the grid-items are re-arranged automatically. I don't know whats the reason.
Current version: 0.14.7, tried 0.16.6 and 0.13.5.
react- @15.6.1

i this grid layout re-arranged on screen size change. But in initial loading it is not working

[trautmaa]

I am having a similar issue. No widget stacking, but layout width is initially larger than the screen. When I resize the window, everything resizes correctly.

The onWindowResize function from WidthProvider does get called when the component mounts, but does not work.

React- @16.0.0
React-Grid-Layout- @0.16.6

[trautmaa]

@saravanannnallasamy Consider https://github.com/maslianok/react-resize-detector as a temporary fix

[porteron]

Having the same issue. Works only when resizing the window.

[anarchistgeek]

Same issue... Could anyone provide a workaround for this? @saravanannnallasamy have you managed to fix this?

[porteron]

@anarchistgeek @saravanannnallasamy

I created a very simple workaround by editing the package code.
I call the windowResize function manually on first load.

1. Open node_modules/react-grid-layout/WidthProvider.js
2. Scroll down to the render function around line 73
3. Replace with the following code:

    var firstLoad = true

    WidthProvider.prototype.render = function render() {
      var self = this;
      if (firstLoad) {
        setTimeout(function () {
          self.onWindowResize();
        }, 500)
        firstLoad = false;
      }

      var _props = this.props,
        measureBeforeMount = _props.measureBeforeMount,
        rest = _objectWithoutProperties(_props, ["measureBeforeMount"]);

      if (measureBeforeMount && !this.mounted) {
        return _react2.default.createElement("div", { className: this.props.className, style: this.props.style });
      }

      return _react2.default.createElement(ComposedComponent, _extends({}, rest, this.state));
    };

1. Restart React/node frontend server.
2. Complete

I fixed the issue on my own fork of the repo. In the meantime, you may use it if you like.

Just run npm install --save https://github.com/mnoster/react-grid-layout

[porteron]

The only code I added was:

    var firstLoad = true

AND

      var self = this;
      if (firstLoad) {
        setTimeout(function () {
          self.onWindowResize();
        }, 500)
        firstLoad = false;
      }

[porteron]

@saravanannnallasamy @trautmaa

I fixed the issue on my own fork of the repo. In the meantime, you may use it if you like.

Just run npm install --save https://github.com/mnoster/react-grid-layout

[saravanannnallasamy]

Just run npm install --save https://github.com/mnoster/react-grid-layout

It worked for me, thank you very much @mnoster

[richbai90]

Has anyone opened a PR for this yet?

[bgold0]

This fixed my issue and should really be added.

[cashwanikumar]

I have same issue.
I have fixed this by just triggering resize event.

componentDidMount() { // Resize grid-layout after initial rendering setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 500) }