Grid rows not wrapping when element is dragged up first column
See original GitHub issueI’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
display: inline-block
and set the axis to ‘xy’.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:8
Top Results From Across the Web
How to wrap and stack items in QML, into rows and columns
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom .
Read more >Relationship of grid layout to other layout methods - CSS
In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and...
Read more >Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`
But the way CSS Grid works, this will cause overflow in the row. The columns will not wrap into new rows if the...
Read more >How to drag and drop data to/from the grid
Dragging Between Grids · Rows can be dragged from one grid to the other grid. · If the row is already present in...
Read more >Grid, fixed row height ( no word wrap, no multi line )
So if there is a small amount of text then the row would dynamically size to the height of one line of text,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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.
@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!