[Bug] After load(), in some cases the Y position is determined incorrectly & sizes are not restored.

[IgorA100]

Subject of the issue

I save current layout and then load it. In some cases, elements are assigned the value gs-y="0" instead of the stored gs-y="3" This is also confirmed at https://gridstackjs.com/demo/serialization.html

Your environment

• version of gridstack.js - 10.1.2
• which browser/OS - Windows 8.1. Chrome 109.0.5414.168

Steps to reproduce

https://github.com/gridstack/gridstack.js/assets/5006170/19029c64-dc81-4825-a4a3-e3e42ee6f624

Expected behavior

After load() element's Y position should always match the stored gs-y="3", not gs-y="0"

[IgorA100]

There is also a problem with the sizes of elements when Load()

https://github.com/gridstack/gridstack.js/assets/5006170/9621fe5d-f077-4821-9fbd-85888b880248

[adumesny]

the bug could be in the demo itself (fail to load the saved data) or the lib, but a bug reguardless...

[IgorA100]

No, this is not an error reading saved data. This shows up in my development environment as well. Initially I looked for the problem in my development environment, and only then I started checking on the demo page. What lib are you talking about?

As far as I understand, the error depends on the arrangement of the elements. Yes, it does not always appear. But try for yourself to perform the actions that I filmed on video and you will be convinced of the mistake!

[erdoganfurkann]

I'm having a similar problem too. When I set float: true, this problem disappears, but I do not want to use the float feature.

[adumesny]

@erdoganfurkann that is a good hint! likely repacking after each item instead of after all info are read in.

[erdoganfurkann]

I have a temporary solution that worked for me. I always initialize the grid stack with float: true option, then change float to false using gridstack's float() method. I call float(false) in the dragstart and resizestart event handlers, but I guess this can also be called in a callback function that runs after the DOM is loaded.

[adumesny]

if someone wants to donate I could take a look but I'm really busy these days, else make a fix. thanks.

[brian-patrick-3]

I'm seeing cases where .save() is missing values like h for individual widgets, which causes the entire page to freeze when you try to call .load()

[adumesny]

@brian-patrick-3 that's likely a different issue. please file a bug with runninge example.

[IgorA100]

The bug I described appears both with float: false and with float: true

[adumesny]

@IgorA100 the video is not playing for me (plays 5 sec then stops). Could you show using picture the state you need to save + load showing the issue ? can't debug without steps. tried editing that serialized demo and moving things around, doing a save + clear does reload the exact same state for me.

[IgorA100]

@adumesny I'm sorry I didn't answer for a long time.

You need to move element No. 2 and save.:

Then move element #2 again

And Load. The position of element No. 2 after Load will not be the same as before Save.

[adumesny]

thanks, I can see the issue now. doing a clear shows the item correctly loading though.

[IgorA100]

I also wrote about the second error https://github.com/gridstack/gridstack.js/issues/2669#issuecomment-2074927746 But perhaps it is interconnected with the first one.

[adumesny]

fixed in next release. don't forget to donate if you find this lib useful! (I also fixed the size issue)