Description
Subject of the issue
When gridstack element is part of the DOM that has moved in any way, e.g. Drag and Drop, it will be displayed incorrectly (or rather disappear from view). This is caused by gridstack._styles losing its reference to ownerNode
ie. style
element that holds the stylesheet.
With the addition of styleInHead in #1313 the consequences can be mitigated as head
is unlikely to be reattached. But the underlying issue can cause problems in the future and need to be looked into.
BTW: #1313 should be viewed separately from this issue.
Your environment
- version of gridstack.js 1.1.2
- which browser and its version (chrome, firefox, edge)
Steps to reproduce
Here is a sample to reproduce: https://jsfiddle.net/2v0kdzgh/
Just drag the gridstack to Drop Here.
Expected behaviour
After reattaching the gridstack should display the same/correctly
Actual behaviour
The gridstack loses its style and all widgets are squashed into 1 pixel line
Possible solutions
In the jsfiddle sample uncommenting grid._updateStyles()
will rebuild the style but this assumes you will have a handle to grid while the problem with this issue is that any parent of the grid could change the DOM and it's unlikely you will have control over this.
One idea is the _styles
could be monitored for change of its ownerNode
and if it is null then run _updateStyles()
. Could it be done with Mutation Observer?