Allow percentage as a valid unit for height

doc/CHANGES.md

@@ -27,7 +27,8 @@ Change log
 
 ## v0.5.5-dev (upcoming changes)
 
-- add `float(val)` to set/get the grid float mode
+- add `float(val)` to set/get the grid float mode [#1088](https://github.com/gridstack/gridstack.js/pull/1088)
+- Allow percentage as a valid unit for height [#1093](https://github.com/gridstack/gridstack.js/pull/1093)
 
 ## v0.5.5 (2019-11-27)
 

doc/README.md

@@ -69,9 +69,9 @@ gridstack.js API
 - `auto` - if `false` gridstack will not initialize existing items (default: `true`)
 - `cellHeight` - one cell height (default: `60`). Can be:
   * an integer (px)
-  * a string (ex: '10em', '100px', '10rem')
+  * a string (ex: '100px', '10em', '10rem', '10%')
   * 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
-  * `'auto'` - height will be calculated from cell width.
+  * `'auto'` - height will be calculated to match cell width (initial square grid).
 - `column` - amount of columns (default: `12`)
 - `ddPlugin` - class that implement drag'n'drop functionallity for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used)
 - `disableDrag` - disallows dragging of widgets (default: `false`).

spec/utils-spec.js

@@ -89,6 +89,7 @@ describe('gridstack utils', function() {
       expect(utils.parseHeight('12.3rem')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'rem'}));
       expect(utils.parseHeight('12.3vh')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'vh'}));
       expect(utils.parseHeight('12.3vw')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'vw'}));
+      expect(utils.parseHeight('12.3%')).toEqual(jasmine.objectContaining({height: 12.3, unit: '%'}));
       expect(utils.parseHeight('12.5')).toEqual(jasmine.objectContaining({height: 12.5, unit: 'px'}));
       expect(function() { utils.parseHeight('12.5 df'); }).toThrowError('Invalid height');
 
@@ -102,6 +103,7 @@ describe('gridstack utils', function() {
       expect(utils.parseHeight('-12.3rem')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'rem'}));
       expect(utils.parseHeight('-12.3vh')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'vh'}));
       expect(utils.parseHeight('-12.3vw')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'vw'}));
+      expect(utils.parseHeight('-12.3%')).toEqual(jasmine.objectContaining({height: -12.3, unit: '%'}));
       expect(utils.parseHeight('-12.5')).toEqual(jasmine.objectContaining({height: -12.5, unit: 'px'}));
       expect(function() { utils.parseHeight('-12.5 df'); }).toThrowError('Invalid height');
     });

src/gridstack.d.ts

@@ -415,9 +415,9 @@ interface GridstackOptions {
   /**
    * one cell height (default?: 60). Can be:
    *  an integer (px)
-   *  a string (ex: '10em', '100px', '10rem')
+   *  a string (ex: '100px', '10em', '10rem', '10%')
    *  0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
-   *  'auto' - height will be calculated from cell width.
+   *  'auto' - height will be calculated to match cell width (initial square grid).
    */
   cellHeight ? : number | string;
 

src/gridstack.js

@@ -118,7 +118,7 @@
       var height = val;
       var heightUnit = 'px';
       if (height && typeof height === 'string') {
-        var match = height.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw)?$/);
+        var match = height.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');
         }