Gridstack stopped working in version 2.0.0 and above if the class="grid-stack" element is a web-component with shadow-dom!
#1438
Comments
|
looks like a CSS issue to me and rows issues which id dynamically created... did you try Also you didn't post a reproduceable case - would be nice to have a small zip project - so I can debug... |
|
Reproduced the issue: https://codepen.io/bhutiyakishan1/pen/bGeKvgM |
bhutiyakishan1
changed the title
class="grid-stack" element is a webcomponent with shadow-dom!class="grid-stack" element is a web-component with shadow-dom!
bhutiyakishan1
changed the title
class="grid-stack" element is a web-component with shadow-dom!class="grid-stack" element is a web-component with shadow-dom!
|
I am seeing this issue as well in my polymer project. |
|
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>`; } |
* fix gridstack#1438 * make sure we handle grid size 0 when initializing things, or we don' create CSS and bad things happen. Also avoid oneColumnMode when no size. * added webcomponent example (more for debugging than anything)
|
fixed in 3.1.2 (3.1.1 was wrong debug symbols) |
|
Thank you ! Appreciate the help ! |
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
Steps to reproduce
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!
The text was updated successfully, but these errors were encountered: