Vertical Stack Block – blocks under each other¶
The vertical stack is the default container of a form: it places its child blocks under each other. A form is normally a vertical stack of sections, each section a vertical stack of rows. It can also be folded to a fixed height with a button to unfold it.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Arranges child blocks in a column |
| Typical use | Sections of a form; a section that is long but rarely read in full (folded) |
| Related | Horizontal Stack Block, Grid Layout Block, Tab Block |
The form itself is a vertical stack. Its own layout settings are not offered in the editor – to set a gap or an alignment for the whole form, put a vertical stack directly into it.
2. Settings¶
All settings below are in the category "Layout". In addition, the block has the settings every block has.
| Setting | Meaning | Default |
|---|---|---|
| "Gap" | Space between the children as a CSS length (8px, 1rem). A plain number means pixels. |
none |
| "Align Items" | Alignment of the children across the column: Start, Center, End, Stretch | Default |
| "Justify Content" | Distribution of the children along the column: Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly | Default |
| "Is Container" | Makes the stack the reference for the column breakpoints of the blocks inside it (see Layout) | off |
| "Container Id" | Name under which blocks further down can refer to this container | none |
| "Expandable" | Draws the stack only up to the folded height and offers a button underneath to unfold it | off |
| "Folded Height" | Height while folded, as a CSS length. Only with "Expandable". | 200px |
| "Expanded" | Condition under which the stack opens unfolded. Only with "Expandable". | opens folded |
| "Unfold Text" | Text of the button that unfolds the stack. Only with "Expandable". | "Show more" |
| "Fold Text" | Text of the button that folds the stack again. Only with "Expandable". | "Show less" |
The settings below "Expandable" only appear once it is switched on.
3. Behaviour¶
- The children are drawn in the order of the tree.
- Folding: the button only appears when the content is really taller than the folded height. A short section therefore looks like any other.
- "Expanded" only decides how the stack opens. The user can fold and unfold it afterwards, and this choice is kept while the form redraws itself. If the result of the condition changes, the stack follows the new result.
- A folded stack is completely loaded. Folding is no way to hide content; use "Visible" for that.
- When the stack is expandable, gap and alignment apply to the content, not to the button below it.
4. Examples¶
Sections of a ticket form. The form contains three vertical stacks "Header", "Details" and
"History", each with "Gap" = 12px. The "Details" stack has a border and padding, so it reads as
a card.
A long description that should not push the form apart. A vertical stack around the description
with "Expandable" on, "Folded Height" = 160px and "Unfold Text" = Read full description.
For rejected requests the reason should be readable at once: "Expanded" = Status = "Rejected".