React-grid-layout: Weird behavior in draging component

[jackie-benowitz]

I have a similar issue using the js file in /dist/react-grid-layout.min.js

I have the following properties setup on my table:

verticalCompact={false}
preventCollision={false}

React Version: 15.6.2

Similar Issue in view here:

Looks like it's pushing it down ~ 5 cells too far

[michaelroevievictoria]

@jackie-benowitz where did you import the style.css ? can I see your code flow ?

[jackie-benowitz]

I was using what was here: https://github.com/STRML/react-grid-layout/blob/master/dist/react-grid-layout.min.js from the commit 0.16.3. Unfortunately, we don't have common/require/es6 setup yet.

The issue for me isn't the css (Imported from an npm install on 0.16.3 and then have my own custom css to make it a bit inline for my company).

This might not be the best gif of what happens, but basically collision on the bottom elements moves them down 5+ extra rows. It's a pain. I reverted to what I think is just 0.16 and now you just can't move the top row elements.

The table's configuration is as follows:

<this.GridLayout className={gridLayoutClassName}
                            style={{backgroundImage, minHeight}}
                            breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
                            cols={this.GRID_COLS}
                            rowHeight={this._getCellSize().height}
                            margin={[this.GRID_MARGIN, this.GRID_MARGIN]}
                            layout={this._getLayoutConfigs()}
                            verticalCompact={false}
                            preventCollision={false}
                            isResizable={this.state.isEditMode}
                            isDraggable={this.state.isEditMode}
                            //needs to be set since we have an input in within the widget
                            // and can't have the whole thing be draggable
                            draggableHandle=".widget-content"
                            onResize={this._throttledLayoutChange}
                            onLayoutChange={this._onLayoutChange}>
             {this._getWidgets()}
           </this.GridLayout>;

with the following variables/functions:

  constructor(props) {
    ...
    this.GridLayout = ReactGridLayout.WidthProvider(ReactGridLayout);
  }

  _getCellSize() {
    const width = this.state.width / this.GRID_COLS;
    return {
      width,
      height: Math.floor(width * (3/4))
    };
  }

I hope that helps!

I should also mention that we'd even want to put preventCollision on, but waiting on this PR's approval: #656

[jackie-benowitz]

@michaelroevievictoria here it is as well on the demo page: http://recordit.co/X3LYWRHL0C

[michaelroevievictoria]

@jackie-benowitz Thanks for the advice 👍 for my problem I just want to make a simple component using this react-grid-layout. But the output in mine is not like what I wanted .. That's Why I assume the compatibility in react v16 is not been completed

Version | Compatibility
-- | --

= 0.11.3 | React 0.14 & v15
= 0.10.0 | React 0.14
0.8. - 0.9.2 | React 0.13
< 0.8 | React 0.12

[oquirozm]

Did you people found a workaround for this issue? I'm having the same problem only when using the responsive grid.

[adrianmui]

same here..

[makis-spy]

FYI I've tested quite a few scenarios and can confirm in my tests 16.6 will cause free movement layouts to not work as expected. As you drag one item down it will just push the below items indefinitely instead of switching places. Reverting to 16.5 works as expected... well as can be expected.

Anybody else find this?

[ishanarola]

I am also having the same issue when i drag component . Is there any work around for this? i am using react v16.3.

[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

[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

[andreo-k]

had same issue with react-grid-layout as you. workaround is to wrap grid with relative-positioned div

        <div style={{position: "relative"}}>
            <ResponsiveReactGridLayout
        </div>