Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[BUG] The order of the grids can break, when the page is loading on small screen, with Responsive Layouts #2584

Open
@matyi15

Description

@matyi15

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}
];

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions