back

Toolbox

autoheight plugin — uses ResizeObserver on the body to keep panel.style.height in sync with content. No !important CSS hacks. Works alongside resizable: the resizable plugin skips height writes when [data-autoheight] is present, so the user can still resize width freely and content reflow is tracked automatically.

Width: panels A and B set no explicit width — the browser uses the shrink-to-fit algorithm on the absolutely-positioned panel and arrives at exactly grid-content + body-padding × 2. Variant C sets an explicit initial width (3 columns) so resize has a meaningful starting point; minWidth enforces a 2-column floor.

A — Compact caption: toolbar-caption + titled:false. Width and height are content-driven.
B — Captionless: captionless + body-draggable. No chrome. Purely content-driven.
C — Flex-wrap resizable: tools reflow when the panel is resized. autoheight tracks height automatically.

Click a tool to select it. Click again to deselect.

Code reference

colsWidth helper (variant C only)

// CSS constants — match --panel-body-padding
// and the grid's cell/gap values.
const CELL = 48, GAP = 10, PAD = 14;
function colsWidth(n) {
  return n * CELL + (n - 1) * GAP + PAD * 2;
}
// colsWidth(2) → 134
// colsWidth(3) → 192

A + B — content-driven sizing

// A — compact caption, no explicit size
panel.open("", "", {
  minWidth: "auto", radius: 22,
  plugins: ["focusable","stackable","draggable",
    "rounded","borderless",
    "titled","toolbar-caption",
    "autoheight","escapable"],
  titled: false
});

// B — captionless + body-draggable
panel.open("", "", {
  minWidth: "auto", radius: 22,
  plugins: ["focusable","stackable",
    "rounded","borderless",
    "captionless","autoheight",
    "body-draggable"]
});

C — flex-wrap resizable

// C — flex-wrap, height auto-tracks
panel.open("", "", {
  width: colsWidth(3),   // 192px initial
  minWidth: colsWidth(2),// 134px floor
  radius: 22,
  plugins: ["focusable","stackable",
    "resizable",
    "rounded","borderless",
    "captionless","autoheight",
    "body-draggable"]
});
// Resize width — tools reflow,
// height stays content-driven.