Grid rows not wrapping when element is dragged up first column

I’m currently getting the UI bug as shown below:

The rows are being pushed outside the grid instead of wrapping as it should.

Perhaps I haven’t implemented the grid correctly - I’ve made the

elements display: inline-block and set the axis to ‘xy’.

Here’s a demo made from the starter codesandbox.

[clara-tsang]

@alentame Ah yes, I couldn’t find that either which made it harder to debug 😛

Figured it out, though - turns out the code finds the width of the container by looking for the first ‘scrollable’ parent of the sortable elements. Because my container wasn’t scrollable, it bubbled up to grab the width of the window. I added overflow: auto to my container and the issue was solved.

I couldn’t find anything in the docs about this issue, and I think it’s worth adding into the README in the FAQ section.

[sarahzinger]

@clara-tsang thanks for the response! I was adding overflow: auto using chrome dev tools to the grid element and it was broken, but I just added it to our code directly and it looks like that might have worked! Thanks so much for your help!!

Here’s what I saw going on if it’s helpful for future folks: It looks like this line was not consistently getting set to true for the right-hanging item in the grid when it should be https://github.com/clauderic/react-sortable-hoc/blob/3fd83f9223a2f88b676635b792f7a6287136837c/src/SortableContainer/index.js#L714-L717

it turned out that this.containerBoundingRect.width was getting set to the window width. We set bounding client to be the scrollContainer https://github.com/clauderic/react-sortable-hoc/blob/3fd83f9223a2f88b676635b792f7a6287136837c/src/SortableContainer/index.js#L263 And the scroll container takes our grid’s container and then calls getScrollingParent on it https://github.com/clauderic/react-sortable-hoc/blob/3fd83f9223a2f88b676635b792f7a6287136837c/src/SortableContainer/index.js#L91-L93 which will move farther and farther up the dom until it hits the window.

I’m not sure if or why this.containerBoundingRect needs to be set to a scrollable container rather than to the container directly. But if it does I think it’d make sense to either auto add a scroll to the container within the library or potentially just document that grids need to have overflow: auto set.

Thanks again for the help!