- Avoid reflow via setting minRow

lmartorella · lmartorella · commit 2a71495c6e44 · 2025-05-12T10:19:09.000+02:00
diff --git a/doc/README.md b/doc/README.md
@@ -115,7 +115,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'`)
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1543,7 +1543,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);
diff --git a/src/types.ts b/src/types.ts
@@ -216,8 +216,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;
 
