no longer force rows for min-height

* fixed issue in nested.html where we had scroll bar when we shouldn't.
* the old code used to set rows # to match the grid min-height (incorrectly when set to say 100% or 10rem) which we no longer do. settign an explicit heiht (in code) with min-height (in CSS) works just fine.
* getCellHeight() will no longer compute using entire grid / #row, ut use the first row instead...

Author: adumesny

demo/nested.html

@@ -15,7 +15,11 @@
     }
     /* make nested grid take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
     .grid-stack > .grid-stack-item.grid-stack-nested > .grid-stack-item-content {
-      inset: 2px;
+      /* inset: 0 2px; not IE */
+      top: 0;
+      bottom: 0;
+      left: 2px;
+      right: 2px;
     }
     /* make nested grid take entire item content */
     .grid-stack-item-content .grid-stack {
@@ -52,7 +56,7 @@ <h1>Nested grids demo</h1>
     let count = 0;
     [...sub1, ...sub2].forEach(d => d.content = String(count++));
     let subOptions = {
-      cellHeight: 50,
+      cellHeight: 50, // should be 50 - top/bottom
       column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
       acceptWidgets: true, // will accept .grid-stack-item by default
       margin: 5,

src/gridstack.ts

@@ -600,12 +600,15 @@ export class GridStack {
        (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
       return this.opts.cellHeight as number;
     }
-    // else do entire grid and # of rows
-    // or get first cell height ?
-    // let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;
-    // let height = Utils.toNumber(el.getAttribute('gs-h'));
-    // return Math.round(el.offsetHeight / height);
-    return Math.round(this.el.getBoundingClientRect().height) / parseInt(this.el.getAttribute('gs-current-row'));
+    // else get first cell height
+    let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;
+    if (el) {
+      let height = Utils.toNumber(el.getAttribute('gs-h'));
+      return Math.round(el.offsetHeight / height);
+    }
+    // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)
+    let rows = parseInt(this.el.getAttribute('gs-current-row'));
+    return rows ? Math.round(this.el.getBoundingClientRect().height / rows) : this.opts.cellHeight as number;
   }
 
   /**
@@ -1238,13 +1241,15 @@ export class GridStack {
     if (!this.engine || this.engine.batchMode) return this;
     let row = this.getRow() + this._extraDragRow; // checks for minRow already
     // check for css min height
-    let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
-    if (cssMinHeight > 0) {
-      let minRow = Math.round(cssMinHeight / this.getCellHeight(true));
-      if (row < minRow) {
-        row = minRow;
-      }
-    }
+    // Note: we don't handle %,rem correctly so comment out, beside we don't need need to create un-necessary
+    // rows as the CSS will make us bigger than our set height if needed... not sure why we had this.
+    // let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
+    // if (cssMinHeight > 0) {
+    //   let minRow = Math.round(cssMinHeight / this.getCellHeight(true));
+    //   if (row < minRow) {
+    //     row = minRow;
+    //   }
+    // }
     this.el.setAttribute('gs-current-row', String(row));
     if (row === 0) {
       this.el.style.removeProperty('height');