Gridstack.js: Gridstack stopped working in version 2.0.0 and above if the `class="grid-stack"` element is a web-component with shadow-dom!
Gridstack stopped working in version 2.0.0 and above if the class="grid-stack" element is a web-component with shadow-dom!
I was on version grid-stack 1.2.0 before, and i am using it inside a web-component where the top most element(class="grid-stack) is a web-component and has a shadow-dom, it was working perfectly until i moved to version 2.0.0! Also tried checking the latest, 2.1.0! But with that version it doesn't work either!
Your environment
- 2.0.0 and above
- Chrome latest
Steps to reproduce
<vi-dashboard id="dashboardEl" class="grid-stack">
<vi-panel loc-x="0" loc-y="0" width="3" height="3" class="grid-stack-item">
<div class="grid-stack-item-content></div>
</vi-panel>
<vi-panel loc-x="3" loc-y="0" width="3" height="3" class="grid-stack-item>
<div class="grid-stack-item-content></div>
</vi-panel>
</vi-dashboard>
If you see above markup, vi-panel and vi-dashboard are both web-components! vi-panel being a webcomponent works fine! But if vi-dashboard is a web-component, it doesnt render properly! With no errors in console!
Expected behaviour
It should render properly as normal grid-stack demo!
Actual behaviour
Everything is stacked at one place ! Drag-drop and resizing doesn't work either!
bhutiyakishan1
All 7 comments
looks like a CSS issue to me and rows issues which id dynamically created... did you try GridStack.init({styleInHead: true},...) and see if that changes things ? (by default it puts the css right before the grid - in same parent.
if Not then I would step into _updateStyles() and see if it's able to create the CSS file and where it goes...
Also you didn't post a reproduceable case - would be nice to have a small zip project - so I can debug...
adumesny
on 3 Nov 2020
Reproduced the issue: https://codepen.io/bhutiyakishan1/pen/bGeKvgM
If you change the version to 2.0.0 or above, you will see the bug! RIght now, i have produced with 1.2.0!
Also i tried doing GridStack.init({styleInHead: true}, no changes!
bhutiyakishan1
on 3 Nov 2020
I am seeing this issue as well in my polymer project.
altonfroikin
on 16 Nov 2020
v3 example showing issue:
<html>
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<link rel="stylesheet" href="demo.css"/>
<script src="../dist/gridstack-h5.js"></script>
</head>
<body>
<script type="module">
import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
class MyElement extends LitElement {
static get properties() { return {} }
render() {
return html`<style>:host {display: block;} </style><slot></slot>`;
}
}
customElements.define('my-element', MyElement);
</script>
<div class="grid-stack"></div>
<script type="text/javascript">
let items = [
{x:0, y:0, w:2, content: '0'},
{x:0, y:1, content: '1'}
];
let grid = GridStack.init();
grid.load(items);
</script>
</body>
</html>
@bhutiyakishan1 found the issue... apparently we get size 0 for the grid and fail to load/create the needed CSS. Doing this for now should fix your issues:
let grid = GridStack.init({disableOneColumnMode: true, cellHeight: 70});
Note: I don't understand what this does in your code and how it's supposed to be used (changing to inline-block didn't fix the issue of grid not having a size)
render() { return html`<style>:host {display: block;} </style><slot></slot>`; }
fixed in 3.1.2 (3.1.1 was wrong debug symbols)
adumesny
on 7 Dec 2020
Thank you ! Appreciate the help !
bhutiyakishan1
on 17 Dec 2020
Related issues
athamsnajeeb1
路
7Comments
saroque
路
4Comments
kevinlandsberg
路
5Comments
ishields
路
5Comments
starplanet
路
4Comments
Most helpful comment
fixed in 3.1.2 (3.1.1 was wrong debug symbols)