Scroll Strip Block – one line that scrolls¶
The scroll strip keeps its child blocks on one line and lets that line scroll instead of wrapping or growing. What does not fit stays reachable with the mouse wheel, by dragging and with arrow buttons; a fade at the edge shows that the line continues. Switched to vertical, the same line runs downwards.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Shows its children on one scrolling line |
| Typical use | The tags of a ticket, a row of cards, a strip of pictures – a row whose length comes from the data |
| Related | Horizontal Stack Block, Repeater Block |
A horizontal stack wraps: fifteen badges become four lines, and the form grows with every tag. A scroll strip stays one line. It is usually combined with a repeater inside it: the repeater decides how many children there are, the strip that they stay on one line.
2. Settings¶
All settings below are in the category "Layout". In addition, the block has the settings every block has, except "Flush".
| Setting | Meaning | Default |
|---|---|---|
| "Vertical" | The strip scrolls up and down instead of sideways | off |
| "Scroll Buttons" | Offers the arrow buttons. Without them, the wheel and dragging remain. | on |
| "Scroll Step" | How far one press of an arrow button moves the strip, in pixels | 160 |
| "Gap" | Space between the children as a CSS length | none |
| "Align Items" | Alignment of the children across the line | Default |
| "Justify Content" | Distribution along the line. Only has an effect while everything fits; once the strip scrolls, the children fill it from the start. | Default |
| "Is Container", "Container Id" | Make the strip a reference for breakpoints further down | off, none |
3. Behaviour¶
- The strip only scrolls while it is too small for its content. An arrow button and the fade only appear on the side where there is something left to scroll to.
- The width of a horizontal strip is limited by its parent, so it needs no setting.
- A vertical strip needs a height. Nothing around a block gives it one, so a vertical strip without a height or a maximum height limits itself to 240px. Set "Size" → height or maximum height to say how tall it should be.
4. Example¶
Tags of a ticket on one line. A scroll strip with "Gap" = 8px contains a repeater named
Tag (horizontal) over the field "Tags", which contains a badge showing Tag. A ticket with 25 tags
shows as many badges as fit and an arrow button on the right.
5. Limitations¶
- Do not use it for a handful of inputs: a row of fields that scrolls sideways hides half the form. Use the columns of a Horizontal Stack Block for that.