Repository navigation
Widget width reported incorrectly by save() after dragging from wider nested grid #2394
Description
Subject of the issue
Widget width is incorrect in JSON produced by the save() method, if the given widget has been dragged from a nested grid that has more columns than the outer grid. The grid and widgets behave correctly, the problem is only with data generated by save(). Loading back this data into the grid will cause an incorrect state (since the JSON contains an impossible layout)
The save() method in gridstack-engine.ts takes the width value from this._layouts if present. The resized node's actual width seems correct, the incorrect value seems to come from this._layouts
https://github.com/gridstack/gridstack.js/blob/89ae9d6fd163137c5fde895ae14d1c5d2bb7a495/src/gridstack-engine.ts#L746C7-L746C7
Your environment
- version of gridstack.js - 8.2.3
- which browser/OS - Firefox 116 / Chrome 114, Windows
Steps to reproduce
- Drag a widget from a grid with 2 columns into a nested grid with 3 columns
- Resize the widget to be as wide as possible
- Drag the widget back into the main grid from the nested grid
- Resize the widget
The widget will have its width reported incorrectly in the JSON data generated bysave()
https://jsfiddle.net/akosfekete/Lpv2au4w/11/
Expected behavior
The width should be the same as it appears in the layout.
Activity
adumesny commentedon Jul 17, 2023
ha, good catch.
._layoutshas higher resolution column count so we tend to save from that (say 12 -> 1 then save should remember the 12 column full layout not 1 column layout). the bug here is that when moving an item to another grid (parent) we don't delete those entries. I'm actually surprised we use _layouts from another grid essentially...akosfekete commentedon Sep 13, 2023
The issue seems to stem from
nodeBoundFix (), where the layout is cached as you mentioned: https://github.com/gridstack/gridstack.js/blob/768b8ef6c508c6c47ad44c0748f0f11405da4716/src/gridstack-engine.ts#L398C37-L398C37The comment at line 389 mentions my use case (the "target" grid has fewer columns than the "source" nested grid). I created a fork where I remove the added nodes from the layout cache when an add event is triggered. I'm not sure if this could cause issues in other use cases, but the width is reported correctly for me after this.
https://github.com/gridstack/gridstack.js/compare/master...akosfekete:gridstack.js:2394_fix?expand=1
better fix: nested grid size issue