Layout Breaks When Loading in Smaller Breakpoints

[GowthamTG]

Description

When initializing the GridStack layout in a larger breakpoint (e.g., lg), the grid properly relayouts itself when resizing to a smaller breakpoint like md. However, if the user loads the page directly in a smaller breakpoint (md), the layout appears broken, with widgets not positioned as expected.

Steps to Reproduce

1. Open the grid layout in a large breakpoint (lg).
2. Resize the window to a medium breakpoint (md) – layout adjusts correctly.
3. Refresh the page while in the md breakpoint – layout appears broken.

Expected Behavior

The grid should correctly initialize in smaller breakpoints without requiring a resize from a larger breakpoint.

Screenshots / Video

Example video showcasing the issue:

Screen.Recording.Feb.15.2025.mov

Reproduction Code

CodeSandbox for reference:
https://codesandbox.io/p/sandbox/gridstack-breakpoint-test-twzq7j

Additional Context

• This issue occurs when the page is initially loaded in a smaller breakpoint like in a ipad or smaller screensize
• GridStack correctly handles resizing but does not seem to initialize properly in smaller breakpoints.

Would love to hear your thoughts on this! Thanks for the great work on GridStack! 🚀

[adumesny]

you're doing nested grids here, I was going to say loading a 12 column layout into smaller size DOES remember the full layout (to go back to). but frankly I have not tested this with nested grids...

[GowthamTG]

@adumesny are there any pointers that you would like to provide on how to solve this issue
would be really helpful!!

[adumesny]

Not that I can think of without debugging it. You can also donate to get it fixed. A lot of nested features were sponsored as I don't use it at work...

[GowthamTG]

Hey @adumesny . I noticed this issue was occurring in both normal and nested grids.

I've submitted a fix in PR #2949 that addresses this by ensuring the grid resizes appropriately for the current screen breakpoint during initialization.

Please take a look when you have a chance. Let me know if you need any clarification or have suggestions for improvements.

Screen.Recording.Feb.17.2025.mp4

[adumesny]

if it happen with normal gid, then it's a simpler fix that used to work, so please post an example so I can take a look...
What you have removes optimizations so this isn't the right fix even if it fixes the issue. thanks!

[GowthamTG]

Hey @adumesny
https://codesandbox.io/p/sandbox/gridstack-breakpoint-test-twzq7j this example with the same issue
where when loading the grid in the smaller width breaks the layout

[adumesny]

loaded at 12

loaded at 3

then stretch to 12 looks the same.

fix your code to use actual unitque content id showing any issue as I'm not seeing it, nor have time to fix it...

[GowthamTG]

Hey @adumesny
Here is the example in the video attached you could see the layout breaks when it loads in 8 columns
I have also update the example with the content id.

I would really like to help to close this issue please do share any pointers that you could think of to solve this

Thank You !

Example : https://codesandbox.io/p/sandbox/gridstack-breakpoint-test-twzq7j

Area.mp4

[adumesny]

ok, so you're saying loading into 8 is not the same as going 12->8, which I guess it should be.

BUT when going 12 -> 8 -> 6 it MAY not be the same as loading into 6 because it uses layout 8 to create 6 so incrementally looks more natural when YOU are inreacting with the design - depending on what reflow option you choose it may not be the same.

Also layout:'list' will not resize the items (unless it has to) and keep the order the same (you test should have 0-n content, and skip all the noResize/noMove options to simplify. I'm not debugging your app, so make it dead simple demo....