We have migrated from old golden-layout to golden-layout 2 in our Angular 17 app, and things are mostly working as expected, however I have one bizarre issue left that I have not been able to solve. In our app we have dashboards, which contain a golden-layout with some widgets inside the layout. Each widget is a standard wrapper with a (golden-layout) ContentItem inside it. The configs for each dashboard are stored on back-end, so whenever a dashboard loads, it gets the config from server and initialises golden-layout with this config. Part of app functionality is user can customise this dashboard and save it as a custom dashboard for only themselves. Process is like this: User visits standard dashboard User customises dashboard in some way - adding/removing widgets, rearranging them, resizing them, etc and then saves dashboard User is then redirected to new custom dashboard The issue is that if user resizes the widgets on a dashboard and then saves the dashboard, when user is redirected to the custom dashboard, the sizes of the widgets is ignored. Other changes like adding/removing/rearranging the widgets are preserved, it is only the sizes of the widgets that is ignored. But then if user does a refresh in the browser and custom page loads again, then it does have the correct heights as set by the user before saving custom dashboard. These are some things I checked: Correct heights are sent to the back-end when saving the page after resizing - they are. Correct heights are returned from the back-end when redirecting to the new portal page - they are. New heights are passed into the GoldenLayout loadLayout method after returned by back-end - they are I've tried clearing the layout with goldenLayout.clear() before calling loadLayout - made no difference I've tried completely destroying the layout with goldenLayout.destroy() before calling loadLayout - made no difference I've tried explicitly setting the new heights manually on the components inside the stacks - made no difference I've tried using the new golden-layout-2 size property instead of the old width/height properties - made no difference Whether page is loaded from scratch or redirected after saving page we still go through same life-cycle, so config is returned from server, new GoldenLayout() and loadLayout are used both times. I saved the configs that are returned when loading page from scratch and after being redirected and checked them in Kdiff - they are mostly identical except for height properties and some minor differences like having null instead of empty string for row/column titles. Here is a copy of config returned by back-end when originally loading a dashboard: { "content": [ { "type": "row", "content": [ { "type": "column", "content": [ { "type": "stack", "content": [ { "type": "component", "content": null, "width": null, "height": null, "id": null, "isClosable": true, "title": "Widget 1", "componentName": "widget-golden-instance", "componentState": {}, "widgetLayoutedInstanceId": "1678f085-fd28-403b-b704-3a79eb66ae7a", "componentType": "widget-golden-instance" } ], "width": null, "height": 27.1869849654493, "id": "c895ec22-ec21-483b-a050-be9c4c30f580", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null }, { "type": "stack", "content": [ { "type": "component", "content": null, "width": null, "height": null, "id": null, "isClosable": true, "title": "Widget 2", "componentName": "widget-golden-instance", "componentState": {}, "widgetLayoutedInstanceId": "a2893d62-8d46-44c7-85f8-2962c51a1f2e", "componentType": "widget-golden-instance" } ], "width": null, "height": 31.9728276435933, "id": "68c4c539-c387-42f7-ba05-6d8352e6749c", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null }, { "type": "stack", "content": [ { "type": "component", "content": null, "width": null, "height": null, "id": null, "isClosable": true, "title": "Widget 3", "componentName": "widget-golden-instance", "componentState": {}, "widgetLayoutedInstanceId": "65cd9ba3-6ac1-4b30-8a09-d6c7c66eec44", "componentType": "widget-golden-instance" } ], "width": null, "height": 40.8401873909574, "id": "a296858d-2494-4178-a4d6-09f49dae300f", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null } ], "width": 100, "height": null, "id": "388d4498-b157-43b1-bf4d-038bd1d5509f", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null } ], "width": 100, "height": null, "id": "b167d6ca-f57f-4add-bdcf-1cf5323b3558", "isClosable": true, "title": "", "componentName": null, "widgetLayoutedInstanceId": null } ], "dimensions": { "defaultMinItemHeight": "60px", "defaultMinItemWidth": "300px", "dragProxyWidth": 300, "dragProxyHeight": 300 }, "settings": { "hasHeaders": true, "showPopoutIcon": false } } And here is copy of config returned by back-end after being redirected (when sizes are of items are not correct): { "content": [ { "type": "row", "content": [ { "type": "column", "content": [ { "type": "stack", "content": [ { "type": "component", "content": null, "width": null, "height": null, "id": null, "isClosable": true, "title": "Widget 1", "componentName": "widget-golden-instance", "componentState": {}, "widgetLayoutedInstanceId": "1678f085-fd28-403b-b704-3a79eb66ae7a", "componentType": "widget-golden-instance" } ], "width": null, "height": 41.79549901048402, "id": "c895ec22-ec21-483b-a050-be9c4c30f580", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null }, { "type": "stack", "content": [ { "type": "component", "content": null, "width": null, "height": null, "id": null, "isClosable": true, "title": "Widget 2", "componentName": "widget-golden-instance", "componentState": {}, "widgetLayoutedInstanceId": "a2893d62-8d46-44c7-85f8-2962c51a1f2e", "componentType": "widget-golden-instance" } ], "width": null, "height": 17.36431359855858, "id": "68c4c539-c387-42f7-ba05-6d8352e6749c", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null }, { "type": "stack", "content": [ { "type": "component", "content": null, "width": null, "height": null, "id": null, "isClosable": true, "title": "Widget 3", "componentName": "widget-golden-instance", "componentState": {}, "widgetLayoutedInstanceId": "65cd9ba3-6ac1-4b30-8a09-d6c7c66eec44", "componentType": "widget-golden-instance" } ], "width": null, "height": 40.8401873909574, "id": "a296858d-2494-4178-a4d6-09f49dae300f", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null } ], "width": 100, "height": null, "id": "388d4498-b157-43b1-bf4d-038bd1d5509f", "isClosable": true, "title": "", "componentName": null, "componentState": null, "widgetLayoutedInstanceId": null } ], "width": 100, "height": null, "id": "b167d6ca-f57f-4add-bdcf-1cf5323b3558", "isClosable": true, "title": "", "componentName": null, "widgetLayoutedInstanceId": null } ], "dimensions": { "defaultMinItemHeight": "60px", "defaultMinItemWidth": "300px", "dragProxyWidth": 300, "dragProxyHeight": 300 }, "settings": { "hasHeaders": true, "showPopoutIcon": false } } I've pretty much run out things to check/fix at this point - hoping someone can suggest something I may have missed Continue reading...
