Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Reattaching gridstack element causes _styles to lose ownerNode #1314

Closed
@gregid

Description

@gregid

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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions