Merge pull request #1381 from adumesny/develop

fix for resize with cellHeight in rem/em

Author: adumesny

demo/float.html

@@ -34,8 +34,8 @@ <h1>Float grid demo</h1>
     addEvents(grid);
 
     let items = [
-      {x: 2, y: 1, width: 1, height: 2},
-      {x: 2, y: 4, width: 3, height: 1},
+      {x: 1, y: 1, width: 1, height: 1},
+      {x: 2, y: 2, width: 3, height: 1},
       {x: 4, y: 2, width: 1, height: 1},
       {x: 3, y: 1, width: 1, height: 2},
       {x: 0, y: 6, width: 2, height: 2}

doc/CHANGES.md

@@ -43,6 +43,7 @@ Change log
 - 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)
+- fix resize with `cellHeight` '6rem' '6em' not working [1356](https://github.com/gridstack/gridstack.js/issues/1356)
 
 ## 2.0.0 (2020-09-07)
 

src/gridstack.ts

@@ -419,8 +419,9 @@ export class GridStack {
   /**
    * Gets current cell height.
    */
-  public getCellHeight(): number {
-    if (this.opts.cellHeight && this.opts.cellHeight !== 'auto') {
+  public getCellHeight(forcePixel = false): number {
+    if (this.opts.cellHeight && this.opts.cellHeight !== 'auto' &&
+       (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
       return this.opts.cellHeight as number;
     }
     // else get first cell height
@@ -1209,7 +1210,7 @@ export class GridStack {
       this.engine.cleanNodes();
       this.engine.beginUpdate(node);
       cellWidth = this.cellWidth();
-      cellHeight = this.getCellHeight();
+      cellHeight = this.getCellHeight(true); // force pixels for calculations
 
       this.placeholder.setAttribute('data-gs-x', target.getAttribute('data-gs-x'));
       this.placeholder.setAttribute('data-gs-y', target.getAttribute('data-gs-y'));
@@ -1222,7 +1223,6 @@ export class GridStack {
       node._beforeDragY = node.y;
       node._prevYPix = ui.position.top;
 
-      // mineHeight - Each row is cellHeight + margin
       this.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
       this.dd.resizable(el, 'option', 'minHeight', cellHeight * (node.minHeight || 1));
     }