Method resizeToContent

src/gridstack.ts:1654–1706

* Updates widget height to match the content height to avoid vertical scrollbars or dead space. * This automatically adjusts the widget height based on its content size. * * Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content' * (sized to gridItem minus

(el: GridItemHTMLElement)

   * grid.resizeToContent(widget);
   */
  public resizeToContent(el: GridItemHTMLElement) {
    if (!el) return;
    el.classList.remove('size-to-content-max');
    if (!el.clientHeight) return; // 0 when hidden, skip
    const n = el.gridstackNode;
    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(true);
    if (!cell) return;
    let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
    let item: Element;
    if (n.resizeToContentParent) item = el.querySelector(n.resizeToContentParent);
    if (!item) item = el.querySelector(GridStack.resizeToContentParent);
    if (!item) return;
    const padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
    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, 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 = el.getBoundingClientRect();
      wantedH += subRec.top - parentRec.top;
    } else if (n.subGridOpts?.children?.length) {
      // not sub-grid just yet (case above) wait until we do
      return;
    } else {
      // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
      const child = item.firstElementChild;
      if (!child) {
        console.error(`Error: GridStack.resizeToContent() widget id:${n.id} '${GridStack.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
        return;
      }
      wantedH = child.getBoundingClientRect().height || itemH;
    }
    if (itemH === wantedH) return;
    height += wantedH - itemH;
    let h = Math.ceil(height / cell);
    // check for min/max and special sizing
    const softMax = Number.isInteger(n.sizeToContent) ? n.sizeToContent as number : 0;
    if (softMax && h > softMax) {
      h = softMax;
      el.classList.add('size-to-content-max');  // get v-scroll back
    }
    if (n.minH && h < n.minH) h = n.minH;
    else if (n.maxH && h > n.maxH) h = n.maxH;
    if (h !== n.h) {
      grid._ignoreLayoutsNodeChange = true;
      grid.moveNode(n, { h });
      delete grid._ignoreLayoutsNodeChange;
    }
  }

  /** call the user resize (so they can do extra work) else our build in version */
  private resizeToContentCBCheck(el: GridItemHTMLElement) {