Merge pull request #3054 from iongroup/fix/reflow

Avoid reflows via explicitly setting minRow

Author: adumesny

doc/README.md

@@ -116,7 +116,7 @@ gridstack.js API
 - `marginBottom`: numberOrString
 - `marginLeft`: numberOrString
 - `maxRow` - maximum rows amount. Default is `0` which means no max.
-- `minRow` - minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. You can also do this with `min-height` CSS attribute on the grid div in pixels, which will round to the closest row.
+- `minRow` - minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. When no set set, the `min-height` CSS attribute on the grid div (in pixels) can be used as well, which will round to the closest row.
 - `nonce` - If you are using a nonce-based Content Security Policy, pass your nonce here and
 GridStack will add it to the `<style>` elements it creates.
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)

src/gridstack.ts

@@ -1603,7 +1603,9 @@ export class GridStack {
     if (!cellHeight) return this;
 
     // check for css min height (non nested grid). TODO: support mismatch, say: min % while unit is px.
-    if (!parent) {
+    // If `minRow` was applied, don't override it with this check, and avoid performance issues
+    // (reflows) using `getComputedStyle`
+    if (!parent && !this.opts.minRow) {
       const cssMinHeight = Utils.parseHeight(getComputedStyle(this.el)['minHeight']);
       if (cssMinHeight.h > 0 && cssMinHeight.unit === unit) {
         const minRow = Math.floor(cssMinHeight.h / cellHeight);

src/types.ts

@@ -217,8 +217,8 @@ export interface GridStackOptions {
   /** maximum rows amount. Default? is 0 which means no maximum rows */
   maxRow?: number;
 
-  /** minimum rows amount. Default is `0`. You can also do this with `min-height` CSS attribute
-   * on the grid div in pixels, which will round to the closest row.
+  /** minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`.
+   * When no set set, the `min-height` CSS attribute on the grid div (in pixels) can be used as well, which will round to the closest row.
    */
   minRow?: number;