Wrong layout generated in responsive mode

[szokeptr]

Software version (please complete the following information):

• Browser: Chrome Version 91.0.4472.114 (Official Build) (x86_64)
• Vue Version 2.6.14
• vue-grid-layout Version: 2.3.12

Describe the bug When in responsive mode, the layout gets generated in a weird way as you resize the window. Please check my codepen: https://codepen.io/szokeptr/pen/oNWNLKp

Screenshots https://assets.codepen.io/319703/Screen+Shot+2021-06-28+at+16.04.45.png

[szokeptr]

I investigated a bit more and it seems like when calculating the responsive layout each overflowing item (l.x + l.w > bounds.cols) is "snapped" to the end of the grid (l.x = bounds.cols - l.w). https://github.com/jbaysolutions/vue-grid-layout/blob/2d5b3e71fb6789bd7f8b462b126dd36f5e80313d/src/helpers/utils.js#L139-L140

Since I am a bit in a rush I forked the project and patched the relevant function to make it work correctly for our use-case, but I think this should be explored a bit more because it's often an undesired behavior.

[robertsLando]

I got the same issue and I fixed by checking if grid items x is grather then cols-num. This should be handled by grid for sure

@gmsa thoughts? I tthink the patch propoised here is a valid one

[gorvitovskaya]

I investigated a bit more and it seems like when calculating the responsive layout each overflowing item (l.x + l.w > bounds.cols) is "snapped" to the end of the grid (l.x = bounds.cols - l.w). https://github.com/jbaysolutions/vue-grid-layout/blob/2d5b3e71fb6789bd7f8b462b126dd36f5e80313d/src/helpers/utils.js#L139-L140

Since I am a bit in a rush I forked the project and patched the relevant function to make it work correctly for our use-case, but I think this should be explored a bit more because it's often an undesired behavior.

Could you please share your patch?

[hisuwh]

Any chance of this getting fixed in the main package?