Skip to content

Vertical Stack Block – widgets one below the other

The vertical stack places its widgets one below the other. The dashboard itself is a vertical stack; inside it, a vertical stack groups widgets into a column, for example the side column of a two-column layout.

This page is part of the widget reference.

1. At a glance
Purpose Arranges widgets in a column
Typical use A column inside a horizontal stack; a section with a heading and its content; a foldable section
Related Horizontal Stack, Grid Layout, Scroll Strip

2. Settings

All settings below are in the category "Layout". In addition, the widget has the settings every widget has, except "Auto Refresh".

Setting Meaning Default
"Gap" Space between the widgets as a CSS length. A plain number means pixels. none
"Align Items" Horizontal alignment of the widgets: Start, Center, End, Stretch Default
"Justify Content" Distribution of the widgets along the column: Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly Default
"Is Container" Makes the stack the reference for the breakpoints of the widgets inside it off
"Container Id" Name under which widgets further down can refer to this container none
"Expandable" Draws the stack only up to the folded height and offers a button below it 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", "Fold Text" Texts of the button. Only with "Expandable". "Show more", "Show less"

3. Behaviour

  • The widgets are drawn in the order of the block tree.
  • An empty stack is only a box – useful as a spacer or, with a background colour and a height, as a divider.
  • Folding: the button only appears while something is really hidden. The user can fold and unfold the stack at any time; "Expanded" only decides how it opens.
  • The stack does not refresh itself. Switch on "Auto Refresh" on the widgets inside it.

4. Example

A side column. A horizontal stack with "Columns" 7fr 3fr. On the right, a vertical stack with "Gap" 12 holding a label "Escalations", a card "Open escalations" and a button "Show all".