diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 8fbed106f..561043d1f 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -66,6 +66,7 @@ Change log ## 4.3.0-dev (TBD) * fix [#1868](https://github.com/gridstack/gridstack.js/issues/1868) prevent swap during resize * fix [#1849](https://github.com/gridstack/gridstack.js/issues/1849) [#1816](https://github.com/gridstack/gridstack.js/issues/1816) save highest resolution in 1 column mode +* fix [#1855](https://github.com/gridstack/gridstack.js/issues/1855) fix resize when padding is large vs cellHeight ## 4.3.0 (2021-10-15) * you can now swap items of different width if they are the same row/height. Thanks to [spektrummedia](http://spektrummedia.com) for sponsoring it. diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 48da70be8..f65da483a 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -535,11 +535,19 @@ GridStack.prototype._leave = function(this: GridStack, el: GridItemHTMLElement, GridStack.prototype._dragOrResize = function(this: GridStack, el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number) { let p = {...node._orig}; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value) let resizing: boolean; - const mLeft = this.opts.marginLeft as number, + let mLeft = this.opts.marginLeft as number, mRight = this.opts.marginRight as number, mTop = this.opts.marginTop as number, mBottom = this.opts.marginBottom as number; + // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855 + let mHeight = Math.round(cellHeight * 0.1), + mWidth = Math.round(cellWidth * 0.1); + mLeft = Math.min(mLeft, mWidth); + mRight = Math.min(mRight, mWidth); + mTop = Math.min(mTop, mHeight); + mBottom = Math.min(mBottom, mHeight); + if (event.type === 'drag') { if (node._temporaryRemoved) return; // handled by dropover let distance = ui.position.top - node._prevYPix; diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts index 0f2c6c97b..d17eecc9b 100644 --- a/src/h5/dd-resizable.ts +++ b/src/h5/dd-resizable.ts @@ -156,6 +156,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt this.originalRect = this.el.getBoundingClientRect(); this.scrollEl = Utils.getScrollElement(this.el); this.scrollY = this.scrollEl.scrollTop; + this.scrolled = 0; this.startEvent = event; this._setupHelper(); this._applyChange();