Resizing from a small screen to a larger screen doesn't set correct widget dimension when rescaled

[nissim-dev]

Subject of the issue

Resizing from a small screen to a larger screen doesn't set correct widget dimension when rescaled

Your environment

Whatever is live on https://gridstackjs.com/ ( I think it's 2.1.0 )
Google Chrome Version 86.0.4240.198 (Official Build) (64-bit)

Steps to reproduce

Gridstack demo itself can be used to replicate the behaviour
https://gridstackjs.com/

1. Resize your window to something smaller than 848px
2. Open https://gridstackjs.com/. Scroll down to the grid. The grid should be in one column mode.
3. Start increasing the size of the window by dragging it, after it becomes larger than 848px, the grid should go into "grid" mode from "onecolumn" mode
   12 columns appear but all the widgets stay on the first column.

Expected behaviour

The widgets dimension and position should be reset correctly.

Actual behaviour

Widgets stay on the first column itself and doesn't put itself in the correct position.

Here's a GIF of the behaviour

Expected result after resizing

[adumesny]

yeah, I'm not surprised as the 12 column layout never get saved as you load directly into 1 column layout, and we don't detect that case. Behavior might have changed with the call to load() instead of html tags being there in the dom.

[nissim-dev]

Since you said "12 column layout never get saved as you load directly into 1 column layout" .

If we could initially save the 12 column layout, before loading the 1 column layout, i think that would work because, There is no problem if initially the grid is loaded onto 12 column layout, then downsized to 1 column layout and back to 12 column layout. It works perfectly fine then.

Here's a GIF

[nissim-dev]

I'm trying to contribute by fixing this issue, I will keep you updated

[adumesny]

great, else I can take a look later. I think we just need to detect when we start with 1 column due to grid width that we had originally been 12 columns (or whatever pref column we receive) and when load() is called (which is later) remember that and treat it as 12 column layout (to be cached) before forcing it to 1 column - could check that given layout has x or width > 1 and therefore not fit to 1 column.

I'll be curious if the same broken behavior happens if you had data-gs-x=1 dom properties when loading vs load() call

[nissim-dev]

Yes, I tried to do exactly something like you said, it's in prepareNode() that the width is adjusted for 1 column mode. The position/dimensions are cached in engine.layouts on engine.updateNodeWidths()

I tried to to cache the original dimensions and position in prepareNode() to engine._layouts but prepareNode is run multiple times before actual addition of node so it's no use putting it there. I cannot cache the position/dimensions on addNode() because there is no node._id generated there. _id is required for caching on engine._id

I'm in a bit of a pickle here. Maybe you can give me some ideas here, as you probably understand the data flow and logic better.

[adumesny]

thanks. I'll take a look...

[adumesny]

fixed in next release!
was a lot more work than I expected.... don't forget to donate $ if you find this lib useful. thanks.

[nissim-dev]

Thanks a lot @adumesny!, this will help a lot of devs using gridstack :)