diff --git a/demo/nested.html b/demo/nested.html index ef4efc3c4..abee10760 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -60,7 +60,7 @@

Nested grids demo

disableOneColumnMode: true, // nested are small, but still want N columns margin: 1 }; - GridStack.init(null, '.grid-stack.top'); + GridStack.init({cellHeight: 70}, '.grid-stack.top'); let grid1 = GridStack.init(nestOptions, '.grid-stack.nested1'); nestOptions.dragOut = false; let grid2 = GridStack.init(nestOptions, '.grid-stack.nested2'); diff --git a/doc/CHANGES.md b/doc/CHANGES.md index c9b94d169..e31f17923 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -42,6 +42,7 @@ Change log - fix `minWidth()`, `minHeight()`, `maxHeight()` to set node value as well [1359](https://github.com/gridstack/gridstack.js/issues/1359) - fix `GridStackOptions` spelling [1359](https://github.com/gridstack/gridstack.js/issues/1359) - fix remove window resize event when `grid.destroy()` [1369](https://github.com/gridstack/gridstack.js/issues/1369) +- fix nested grid resize [1361](https://github.com/gridstack/gridstack.js/issues/1361) ## 2.0.0 (2020-09-07) diff --git a/src/gridstack.ts b/src/gridstack.ts index 32f3666b8..45280842d 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1197,9 +1197,11 @@ export class GridStack { /** called when item starts moving/resizing */ let onStartMoving = (event, ui) => { + let target: HTMLElement = event.target; + // trigger any 'dragstart' / 'resizestart' manually if (this._gsEventHandler[event.type]) { - this._gsEventHandler[event.type](event, event.target); + this._gsEventHandler[event.type](event, target); } this.engine.cleanNodes(); @@ -1207,8 +1209,6 @@ export class GridStack { cellWidth = this.cellWidth(); cellHeight = this.getCellHeight(); - let { target } = event; - this.placeholder.setAttribute('data-gs-x', target.getAttribute('data-gs-x')); this.placeholder.setAttribute('data-gs-y', target.getAttribute('data-gs-y')); this.placeholder.setAttribute('data-gs-width', target.getAttribute('data-gs-width')); @@ -1219,20 +1219,10 @@ export class GridStack { node._beforeDragX = node.x; node._beforeDragY = node.y; node._prevYPix = ui.position.top; - let minHeight = (node.minHeight || 1); // mineHeight - Each row is cellHeight + margin this.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1)); - this.dd.resizable(el, 'option', 'minHeight', cellHeight * minHeight); - - if (event.type === 'resizestart') { - let itemElement = target.querySelector('.grid-stack-item') as HTMLElement; - if (itemElement) { - let ev = document.createEvent('HTMLEvents'); - ev.initEvent('resizestart', true, false); - itemElement.dispatchEvent(event); - } - } + this.dd.resizable(el, 'option', 'minHeight', cellHeight * (node.minHeight || 1)); } /** called when item is being dragged/resized */