resizeToContent() now handle content above sub grid

also
* updated demo to showcase sub-grid with header content.

Author: adumesny

demo/demo.css

@@ -72,8 +72,5 @@ h1 {
 }
 .grid-stack.grid-stack-nested {
   background: none;
-  /* background-color: red; */
-  /* take entire space */
-  position: absolute;
-  inset: 0; /* TODO change top: if you have content in nested grid */
+  inset: 0;
 }

demo/nested.html

@@ -41,9 +41,14 @@ <h1>Nested grids demo</h1>
     <a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
     <br><br>
     <!-- grid will be added here -->
-  </div>
+  </div>d
   <script src="events.js"></script>
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      if (w.content) el.innerHTML = w.content;
+    };
+
     let staticGrid = false;
     let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
     let sub2 = [ {x:0, y:0, h:2}, {x:1, y:1, w:2}];
@@ -66,7 +71,7 @@ <h1>Nested grids demo</h1>
       subGridOpts: subOptions, // all sub grids will default to those
       children: [
         {x:0, y:0, content: 'regular item'},
-        {x:1, y:0, w:4, h:4, sizeToContent: true, subGridOpts: {children: sub1, id:'sub1_grid', class: 'sub1'}},
+        {x:1, y:0, w:4, h:4, sizeToContent: true, content: '<div>nested grid sizeToContent:true with some header content</div>', subGridOpts: {children: sub1, id:'sub1_grid', class: 'sub1'}},
         {x:5, y:0, w:3, h:4, subGridOpts: {children: sub2, id:'sub2_grid', class: 'sub2'}},
       ]
     };

doc/CHANGES.md

@@ -118,7 +118,8 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 11.1.0-dev (TBD)
-* fix: [#2877](https://github.com/gridstack/gridstack.js/pull/2877) make sure sub-grid inherit parent opts by default, with subgrid defaults.
+* fix: [#2878](https://github.com/gridstack/gridstack.js/pull/2878) make sure sub-grid inherit parent opts by default, with subgrid defaults.
+* fix: [#2879](https://github.com/gridstack/gridstack.js/pull/2879) sub-grid item `sizeToContent:true` now handle content above/below sub grid.
 
 ## 11.1.0 (2024-11-17)
 * feat: [#2864](https://github.com/gridstack/gridstack.js/issues/2864) added `GridStackOptions.layout` for nested grid reflow during resize. default to 'list'.

src/gridstack.ts

@@ -1408,8 +1408,11 @@ export class GridStack {
     const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
     let wantedH: number;
     if (n.subGrid) {
-      // sub-grid - use their actual row count * their cell height
+      // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)
       wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
+      const subRec = n.subGrid.el.getBoundingClientRect();
+      const parentRec = n.subGrid.el.parentElement.getBoundingClientRect();
+      wantedH += subRec.top - parentRec.top;
     } else if (n.subGridOpts?.children?.length) {
       // not sub-grid just yet (case above) wait until we do
       return;