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....

[GowthamTG]

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

Yes @adumesny that is the problem

Sorry @adumesny I am not able to understand
can you please elaborate on what I need to provide more or is there something that I need to change in code.
Will be glad to provide more info on this

This is codesandbox has a very simple example which is based out of the Responsive Breakpoint Example that we have in the gridstack page
I have created the example based on demo/responsive_break.html file but with just different options

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

[adumesny]

this shows the issue, at 1/5th the code size...

<!DOCTYPE html>
<head>
  <title>Responsive column</title>
  <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <h1>Responsive: load into smaller size</h1>
  <span>Number of Columns:</span> <span id="column-text"></span>
  <div class="grid-stack">
  
  <script type="text/javascript">
    let children = [ // our initial 12 column layout
      {x: 0, y: 0, w: 12},
      {x: 0, y: 1, w: 3},
      {x: 3, y: 1, w: 3},
      {x: 6, y: 1, w: 3},
      {x: 9, y: 1, w: 3},
    ];
    children.forEach((n, i) => {n.id = i; n.content = String(i)});

    let grid = GridStack.init({
      cellHeight: 80,
      columnOpts: {
        breakpoints: [
          { c: 8, w: 1200 },
          { c: 6, w: 996 },
          { c: 3, w: 768 },
          { c: 1, w: 480 },
        ],
        layout: "list",
      },
      children})
    .on('change', (ev, gsItems) => text.innerHTML = grid.getColumn());

    let text = document.querySelector('#column-text');
    text.innerHTML = grid.getColumn();
  </script>
</body>
</html>

[GowthamTG]

Hey @adumesny
I have tried debugging this
looks like the problem is the execution stops at this place for updating the grid

gridstack.js/src/gridstack.ts

Line 944 in 2b63bab

if (!this.engine) return this; // called in constructor, noting else to do

where inside the constructor initially we dont have the gs engine

if we call this function checkDynamicColumn after the engine instantiates it should work right ?

[adumesny]

yes, but this is only part of the problem. a full relayout from 12 (or max column) to actual using the responsive layout still needs to happen during init, without creating widgets at 12 - not as trivial as it sounds and why your review is incorrect (inefficient).

[GowthamTG]

Hey @adumesny,
I understand that there's some additional computation happening initially. From an experience point of view, when I removed that check, the performance still seemed fine to me. The performance-to-experience tradeoff didn’t feel bad at all.

Is there something we can temporarily add on the app side to regenerate the grid when the app is loaded on a smaller screen, until we have a proper fix in the Gridstack repo?

[adumesny]

you could try loading it with responsive disabled, then adding it and may need to call something (a resize or such) to force it to relayout...

a proper fix is not trivial and I'm super busy, so not sure when I will get to it. If you want to sponsor it I can take a look sooner...

[GowthamTG]

Hey @adumesny

I am running this funtionon my side code as soon as I do grid.init() which is working out for me with grid.batchUpdate before and after the function call ( I am calling this function when the grid loads only in grid 8 and 6 )

Please do let me know if there is a better way to do this would be really helpfuil

import { GridStack } from 'gridstack';

export const recursivelyCompactGrid = (grid: GridStack) => {
  grid.compact();
  grid.engine.nodes.forEach((node) => {
    if (node.subGrid) {
      recursivelyCompactGrid(node.subGrid);
    }
  });
};

Example of it

    const BREAK_POINTS_TO_COMPACT_AT_LOAD = new Set([6,8])
    const grid = GridStack.init(optionsRef.current, containerRef.current);

      const currentColumn = grid.getColumn();
      if (BREAK_POINTS_TO_COMPACT_AT_LOAD.has(currentColumn)) {
        grid.batchUpdate(true);
        recursivelyCompactGrid(grid);
        grid.batchUpdate(false);
      }

Thank You !

[adumesny]

you got it. compact() and layout: 'list' are essentially the same. batch mode to optimized layout, thought compact() should already do that...