Items can shift up the grid when resizing the window while using columnOpts.breakpoints config

[ocostello]

Subject of the issue

When using columnOpts.breakpoints config for responsive support and dom elements to define widgets, widening the window after it was very slim does not return widgets to their saved dimensions/positions.

Note: if you position the items in the other order (swapping the items in layout in the JS code) a different bug happens.

This is happening in our app and we're having to remove use of breakpoints for now to work around the issue.

Your environment

12.2.1
Chrome / MacOS

Steps to reproduce

https://jsfiddle.net/gxrdhnbm/7/

• Open the jsfiddle
• Add these two dependencies under 'Resources' on the left
  • https://cdn.jsdelivr.net/npm/gridstack@12.2.1/dist/gridstack-all.js
  • https://cdn.jsdelivr.net/npm/gridstack@12.2.1/dist/gridstack.min.css
• Open the app viewport wide to see that the expected behaviour at full width is a widget with width 6 on line one and another with width 12 on line two
• Make the gridstack container thin (using the 'resize' button on the bottom right) so that both components change to width 1
• Refresh the page, the width of the container should be saved in code
• Widen the container, the second widget changes to width 1 and repositions on row 1

Expected behavior

The second widget should stay on row 2 and widen to its original width 12

Screen.Recording.2025-07-15.at.10.55.48.mp4

[FilipKujavec]

Cant reproduce with v12.2.2 issue was probably fixed with #3071

[ocostello]

I got the repro steps slightly wrong, need to click browser refresh instead of "run".

Here I test on 12.2.2 and show "run" not reproducing it but refreshing does

Screen.Recording.2025-07-21.at.09.07.49.mp4

[FilipKujavec]

I still cant reproduce it with the reload. Did you perhaps not save your changes after updating the version? Try this fiddle https://jsfiddle.net/yengwzd0/

[ocostello]

Yup think you might be right, I can't repro there