Repository navigation
[BUG] The order of the grids can break, when the page is loading on small screen, with Responsive Layouts #2584
Description
Subject of the issue
What the title says.
The order of the grids can break, when the page is loading on small screen, with Responsive Layouts.
Your environment
version of gridstack.js - 10.0.1
which browser/OS - Chrome/MacOS
Steps to reproduce
https://gridstackjs.com/demo/responsive_break.html
In the Responsive demos (either by column size or using breakpoints) if you reload the page when only one column should be displayed, than grid nr. 5 is placed before grid nr. 4. (But if you start from a bigger resolution, and zoom to the smallest, the order remains fine).
Expected behavior
The order should remain 1,2,3,4,5.
The bug is even more visible, if you change the items array a bit.
let items = [
{x:0,y:0,w:1,h:1},
{x:1,y:0,w:1,h:1},
{x:2,y:0,w:1,h:2},
{x:9,y:0,w:1,h:2},
{x:0,y:1,w:1,h:1},
{x:1,y:1,w:1,h:1},
{x:1,y:2,w:2,h:2}
];
Activity
Cam-Bloom commentedon Feb 2, 2024
Also experiencing this problem in my app
JakubEleniuk commentedon Feb 22, 2024
Maybe there is a bug in
checkDynamicColumn()? The order is correct on initial load when commenting it out in the constructor, however loading after that still breaks the order.lopermo commentedon Mar 7, 2024
Have the same problem
adumesny commentedon Mar 7, 2024
ok, is someone wlling to donate to get this looked into ? I don't have the bandwidth to look at everything these days...
NicolasCoelho commentedon Apr 18, 2024
Still happening in version 10.1.2. I think there is a bug in the _fixCollisions function. It calls moveNode function passing the variable collide to moveNode, but the real collided is the current node. Does it not must pass the current node instead the colided one? I changed to use nn instead the collide variable and it worked.
mvkampen commentedon Jun 20, 2024
I think I might have uncovered some related issue, when initializing with markup. I created a simple example.
https://jsfiddle.net/q6baf31k/13/
When I add items as children during initialization, it seems to work properly both when resizing down to 1 column, and when rendering initially as 1 column. In both cases the items are in order 0 to 4.
However in our use case we render markup and initialize GridStack on existing HTML markup. As I resize down to 1 column it will order correctly from 0 to 4. But when running the example small as 1 column, it will order as 2, 4, 3, 1, 0.
sortNodes is called as each node is added and moveNode is called, then this.nodes still seems to be in the correct order. Not until _packNodes is called during batchUpdate is when the nodes are getting in the wrong order.
mvkampen commentedon Aug 23, 2024
FWIW: I applied the change suggestion of @NicolasCoelho, but that did not resolve my issue described above.
quick691fr commentedon Sep 4, 2024
From my testing, it's happening only when you use addWidget() function with a foreach loop over your items to add your items, if you use children property in init() function or load() function to load your items, you won't have any problem.
adumesny commentedon Jun 21, 2026
not a bug since addWidget()a nd load() (batch) will behave different as designed.