rem/em support for sizeToContent

demo/sizeToContent.html

@@ -36,6 +36,7 @@ <h1>sizeToContent options demo</h1>
       <a onClick="column(12)" class="btn btn-primary" href="#">12</a>
       cellHeight:
       <a onClick="cellHeight(25)" class="btn btn-primary" href="#">25</a>
+      <a onClick="cellHeight('3rem')" class="btn btn-primary" href="#">3rem</a>
       <a onClick="cellHeight(50)" class="btn btn-primary" href="#">50</a>
       <a onClick="cellHeight(75)" class="btn btn-primary" href="#">75</a>
       Widget:
@@ -74,7 +75,7 @@ <h1>sizeToContent options demo</h1>
     items.forEach(n => n.id = String(count++));
     let opts = {
       margin: 5,
-      cellHeight: 50,
+      cellHeight: '3rem', // = 48px
       sizeToContent: true, // default to make them all fit
       resizable: { handles: 'all'}, // do all sides for testing
       acceptWidgets: true,

doc/CHANGES.md

@@ -109,6 +109,7 @@ Change log
 ## 10.0.0-dev (TBD)
 * fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent
 * fix: [#2561](https://github.com/gridstack/gridstack.js/pull/2561) issues with sizeToContent animation, cleanup, etc...
+* fix: [#2427](https://github.com/gridstack/gridstack.js/issues/2427) sizeToContent supports rem/em cell height
 * fix: [#2558](https://github.com/gridstack/gridstack.js/pull/2558) remove style node in shadow root
 * fix: [#2556](https://github.com/gridstack/gridstack.js/pull/2556) make sure 'new GridStack(el)' set el.gridstack=this right away
 * cleanup: [#2550](https://github.com/gridstack/gridstack.js/pull/2550) Optimize resize arrow (~88% lighter from 1.82 KB to 225B)

src/gridstack.ts

@@ -811,11 +811,18 @@ export class GridStack {
        (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
       return this.opts.cellHeight as number;
     }
+    // do rem/em to px conversion
+    if (this.opts.cellHeightUnit === 'rem') {
+      return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    if (this.opts.cellHeightUnit === 'em') {
+      return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(this.el).fontSize);
+    }
     // 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')) || 1; // since we don't write 1 anymore
-      return Math.round(el.offsetHeight / height);
+      let h = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
+      return Math.round(el.offsetHeight / h);
     }
     // 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'));
@@ -1358,7 +1365,7 @@ export class GridStack {
     if (!n) return;
     const grid = n.grid;
     if (!grid || el.parentElement !== grid.el) return; // skip if we are not inside a grid
-    const cell = grid.getCellHeight();
+    const cell = grid.getCellHeight(true);
     if (!cell) return;
     let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
     let item: Element;
@@ -1370,7 +1377,7 @@ export class GridStack {
     let wantedH: number;
     if (n.subGrid) {
       // sub-grid - use their actual row count * their cell height
-      wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight();
+      wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
     } else {
       // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
       const child = item.firstElementChild;

src/types.ts

@@ -138,7 +138,7 @@ export interface GridStackOptions {
   /**
    * one cell height (default?: 'auto'). Can be:
    *  an integer (px)
-   *  a string (ex: '100px', '10em', '10rem'). Note: % doesn't right - see demo/cell-height.html
+   *  a string (ex: '100px', '10em', '10rem'). Note: % doesn't work right - see demo/cell-height.html
    *  0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files.
    *  'auto' - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle`
    *  'initial' - similar to 'auto' (start at square cells) but stay that size during window resizing.