[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

bandicam.2024-04-24.15-31-43-405.mp4

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()

bandicam.2024-04-24.16-12-42-666.mp4

[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 #2669 (comment)
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)