Skip to main content

Container Height

Every container on a form sits in a grid cell with an authored height — the Height you set (in grid units) when you size the container on the canvas. Container Height settings decide what that authored height means at render time: whether the container is locked to it, treats it as a floor, treats it as a ceiling, or ignores it and simply grows to fit whatever is inside.

Everything about building the form — containers, fields, widgets — works exactly as described in Forms. This page covers the height settings and how they render.

Key Concept

There are two levels of control:

  1. A per-container Height Behaviour setting (in each container's ⚙ settings).
  2. A form-level All Containers Fit Content switch (in the form's ⚙ settings) that can override every container at once.

The form-level switch is on by default, so existing forms keep behaving exactly as they always have — each container grows to fit its content.

Height Behaviour — per container​

Open a container's Settings ⚙ in the Form Builder. Under the styling settings you'll find Height Behaviour:

ModeWhat it does
Fit Content (default)The container grows to fit its content and never clips or scrolls. Its authored height is ignored. This is today's behaviour.
FixedThe container is exactly its authored height — no taller, no shorter — regardless of how much content it holds. Content that doesn't fit scrolls within the container.
Max HeightThe container grows with its content up to its authored height, then stops growing and scrolls the rest. Use it to cap a container that would otherwise get very tall.
Min HeightThe container is at least its authored height, and grows taller if its content needs more room. Use it to reserve a minimum amount of space.

The number used by Fixed, Max Height, and Min Height is the container's own Height (the Width/Height setting directly below it) — there is no separate pixel value to maintain.

The height wins over the content

Fixed and Max Height are authoritative: the container is held to its configured height no matter what sits inside it — including a custom widget whose own content is taller. The container never spills past its height; anything beyond it scrolls. (Fit Content and Min Height grow with their content by design.)

No stretching to match neighbours

When a container uses Fixed, Max Height, or Min Height, it keeps its own height even if a taller container sits beside it in the same row. In Fit Content mode, containers behave as before.

Sample rendering​

Picture one row with two containers side by side — a short one (a couple of fields) and a tall one (many fields). The tall container is what makes the row tall.

Fit Content (default) — each container is exactly as tall as its own content:

┌── Short ──────────┐  ┌── Tall ───────────┐
│ Field A           │  │ Field 1           │
│ Field B           │  │ Field 2           │
└───────────────────┘  │ Field 3           │
                       │ Field 4           │
   (short stays short) │ Field 5           │
                       └───────────────────┘

Fixed (authored height = 3 rows) on the short container — it is locked to the authored height even though its content is smaller, and it does not stretch to match the tall neighbour:

┌── Short (Fixed) ──┐  ┌── Tall ───────────┐
│ Field A           │  │ Field 1           │
│ Field B           │  │ Field 2           │
│                   │  │ Field 3           │
└───────────────────┘  │ Field 4           │
                       │ Field 5           │
   (empty space kept)  └───────────────────┘

Max Height (authored height = 3 rows) on the tall container — it grows only up to the cap instead of running the full length of its content:

┌── Short ──────────┐  ┌── Tall (Max 3) ───┐
│ Field A           │  │ Field 1         ▲ │
│ Field B           │  │ Field 2         ▓ │
└───────────────────┘  │ Field 3         ▼ │
                       └───────────────────┘
                       (capped at 3 rows; the
                        rest scrolls inside)

Min Height (authored height = 3 rows) on the short container — it never renders shorter than the authored height, but still grows if its content is larger:

┌── Short (Min 3) ──┐  ┌── Tall ───────────┐
│ Field A           │  │ Field 1           │
│ Field B           │  │ Field 2           │
│                   │  │ Field 3           │
└───────────────────┘  │ Field 4           │
                       │ Field 5           │
   (at least 3 rows)   └───────────────────┘

All Containers Fit Content — form level​

Open the form's Settings ⚙ (the form details panel). At the bottom you'll find:

SettingDescriptionDefault
All Containers Fit ContentWhen on, every container on the form fits its content, ignoring each container's own Height Behaviour. When off, each container honours its own Height Behaviour setting.On

Think of it as a master switch:

  • On (default) — the whole form behaves as it always has. Per-container Height Behaviour settings are ignored, so turning this on is the quickest way to get back to the classic "everything grows to fit" layout without touching individual containers.
  • Off — the form respects each container's Height Behaviour. Containers still set to Fit Content grow to their content; containers set to Fixed / Max Height / Min Height apply their authored height as described above.
All Containers Fit Content = ON      All Containers Fit Content = OFF
─────────────────────────────      ─────────────────────────────────
Every container → Fit Content       Each container → its own
(per-container setting ignored)     Height Behaviour setting

When to use it​

Reach for the per-container modes (with the form switch off) when:

  • A container looks unbalanced because it stretches to match a taller neighbour and you want it to keep its own size → Fixed or Max Height.
  • A container holds a widget that can grow very tall (a long list, an embedded grid) and you want to cap it → Max Height.
  • You want a container to reserve space so the layout doesn't jump as content loads → Min Height.

Leave All Containers Fit Content on (the default) when you're happy with every container growing to fit — which is the right choice for most forms.

Notes​

  • Text / Title widgets always render at their authored height, regardless of these settings — their sizing is unchanged.
  • These settings apply to Design Studio Forms (Create, Edit, View, and Quick Edit forms built in the Form Builder).
  • Because the form-level switch defaults to on, upgrading has no visible effect on existing forms until you turn it off and start choosing per-container modes.

Next Steps​