Merge pull request #2471 from adumesny/master

adumesny · web-flow · commit 56b0bf6692ac · 2023-09-27T07:54:18.000-07:00
"Invalid height" error CSS minHeight
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -102,6 +102,7 @@ Change log
 
 ## 9.2.1-dev (TBD)
 * fix - sub-grid styles now look for immediate correct parent, not any depth above.
+* fix [#2469](https://github.com/gridstack/gridstack.js/issues/2469) "Invalid height" error CSS minHeight
 
 ## 9.2.1 (2023-09-20)
 * fix _updateContainerHeight() to use height rather than min-height again (apart for nested grids which need it) and partial getComputedStyle CSS minHeight support
diff --git a/spec/e2e/html/2469_min-height.html b/spec/e2e/html/2469_min-height.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Flex display test #2469</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css" />
+  <script src="../../../dist/gridstack-all.js"></script>
+  <style type="text/css">
+    .some-flex-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+
+</head>
+<body>
+  <h1>Flex display test #2469</h1>
+  <div class="some-flex-wrapper">
+    <div class="grid-stack"></div>
+  </div>
+  <script src="events.js"></script>
+  <script type="text/javascript">
+    let grid = GridStack.init({
+      disableOneColumnMode: true,
+      float: false,
+      cellHeight: '120px',
+      minRow: 1,
+      margin: 10,
+    });
+
+    let items = [
+      {x: 1, y: 1, content:'0'},
+      {x: 2, y: 2, w: 3, content:'1'},
+    ];
+    grid.load(items);
+  </script>
+</body>
+</html>
diff --git a/src/utils.ts b/src/utils.ts
@@ -211,12 +211,15 @@ export class Utils {
     let h: number;
     let unit = 'px';
     if (typeof val === 'string') {
-      let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/);
-      if (!match) {
-        throw new Error('Invalid height');
+      if (val === 'auto') h = 0;
+      else {
+        let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/);
+        if (!match) {
+          throw new Error('Invalid height');
+        }
+        unit = match[2] || 'px';
+        h = parseFloat(match[1]);
       }
-      unit = match[2] || 'px';
-      h = parseFloat(match[1]);
     } else {
       h = val;
     }
