Improved item placement in _updateNodeWidths() #822
Conversation
There are several issues in the GridStack.prototype._updateNodeWidths method. 1) Not all the items are guaranteed to be processed. This is because the update() method can change the this.grid.nodes array. This can lead to items being ignored. The code now processes each item in the grid. 2) The code does not correctly confine items to the grid's width. This code adds sanity checks to make sure that an item is always placed inside the grid and that it's width does not overlap the grid's width.
|
Please make sure PR passes CI tests including lint. Thank you. |
|
It looks like it's just complaining about the placement of the comma, but I can't figure out how to resolve the issue in the pull request. I can't seem to modify the file. My Google-fu must be failing me, because I'm not seeing any directions on fixing the problem. |
|
Just push the changes to the repository. It should update PR as well |
|
Hey @dswitzer ! I think this code makes sense, but could you provide an example where making this change fixes something? I'm very sorry to be two years late to this party! I promise that if you have a little time to address this, I will happily merge :) |
|
I apologize that I didn't document the exact use cases that cause the issue. It's been a long time, so my memory is foggy on the details. What I know is we were having issues with grid elements not always appearing withing the grid when the grid size was changing. We'd have elements that were dangling outside the grid or that were not getting shifted at all. Looking at my changes, I think there here are the two issues I was fixing:
|
| // each item in the grid gets processed. We need to get a fixed list of | ||
| // array items, because the this.update() can shift items in the this.grid.nodes | ||
| // array which can lead to elements not being processed. | ||
| var nodes = _.map(this.grid.nodes, 'el') |
There was a problem hiding this comment.
this.grid.nodes.map(n => n.el)
ES6 without lodash
|
@dswitzer thank you for making this submit! |
Description
I noticed there are several bugs in the
GridStack.prototype._updateNodeWidthsthat can lead to elements not being placed correctly when the grid size changes. This causes issues when trying to use Gridstack in a responsive design.Here's a summary of what my patch changes:
Checklist
npm test)