Stack styling

Stack styling

InfoIn a nutshell

Stack controls how child elements are arranged inside a Canvas container or directly on a portal page when they are a stacked next to each other. You can set the stack direction (horizontal or vertical), how the child elements are aligned within the container, the spacing between them, and how the container handles overflow when they exceed the stack's size.

1. Description

A Stack is a layout arrangement that displays its child elements*link to elements page* in a single direction, either horizontally (H-Stack) or vertically (V-Stack) within on the portal page or within a Canvas element. It automatically places child elements one after another along its main axis, maintaining consistent spacing and alignment. The Stack property controls four aspects of this arrangement, the direction, the alignment of child elements within the container, the gap between them, and what happens when they overflow the container's boundary.*link each separately*

  

2. Possible values

  1. Stack Type - Determines whether the elements inside a stack are arranged in a horizontal row (H-Stack) or a vertical column (V-Stack).
ValueHow it works
H-StackChild elements are arranged left to right along the horizontal axis.

Ideal for: Navigation bars, icon rows, side-by-side content blocks, and any layout where elements should appear in a horizontal line.
V-StackChild elements are arranged top to bottom along the vertical axis.

Ideal for: Vertical menus, stacked content sections, and any layout where elements should appear in a column.
  1. Align components - Controls how children are positioned within the stack container. Selected from a dropdown with nine options covering both axes simultaneously. The available options are Top left, Top center, Top right, Center left, Center, Center right, Bottom left, Bottom center, and Bottom right.
NotesNote: Align components governs child arrangement within the Stack container. It is distinct from the Alignment*link to Alignment doc* property available on individual elements, which positions that element's own content within its boundary. Refer to *link to Alignment doc* for element-level alignment.
  1. Spacing - Sets the gap between consecutive child elements along the main axis. While setting the spacing at 0px flushes the child elements against each other, increasing spacing displays strong separation between them.
  1. Overflow - Controls what happens when the stack's children collectively exceed the container's size:
OptionDescription
ScrollChild elements that exceed the stack's boundary are accessible by scrolling.

Ideal for: A scrollable list, an image gallery, or a carousel of items
WrapChild elements that exceed the main axis wrap reflow naturally to a new line (H-Stack) or a new column (V-Stack).

Ideal for: Tag clouds or responsive grids
Wrap reverseChild elements that exceed the main axis wrap and reflow in reverse order, that is, the last items wrap first. For example, new rows appearing above existing rows rather than below.

Ideal for: Right-anchored tag groups or bottom-aligned content that needs to stack upward.

3. How to set stack properties?

  1. Select a stacked container on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click and open the Stack accordion within the pane.
  3. Click H-Stack for a horizontal arrangement or V-Stack for a vertical arrangement.
  4. Click the Align components dropdown and select the desired alignment option from the nine available values, Top left, Top, Top right, Left, Center, Right, Bottom left, Bottom, Bottom right, Edge to edge, and Space evenly.
NotesNote:
  1. Edge to edge distributes children so the first child anchors to the top edge of the stack and the last child anchors to the bottom edge, with equal space between them.
  2. Space evenly distributes equal gaps before, between, and after all children.
  1. Enter a value in px in the Spacing field. This determines the gap between consecutive child elements along the main axis.
  2. Click the Overflow dropdown and select from:
    1. Scroll - Child elements overflow and become scrollable within the stack
    2. Wrap - Child elements reflow to a new line or column when they exceed the stack
    3. Wrap reverse - Child elements reflow in reverse order when they exceed the stack
  3. Click Save in the top right corner to ensure the changes are retained.

4. Applicable elements

Stack styling are available only for:

  1. V-Stack
  2. H-Stack
  3. Menu

5. Points to note

  1. Stack alignment and element alignment - The Stack's Align components controls where child elements are positioned within the stacked container. The individual Alignment*link to Alignment doc* property on each child element controls where its own content sits within its boundary. Both properties can be set independently.
  2. Spacing applies only along the main axis - In an H-Stack, Spacing sets the horizontal gap between children while in a V-Stack, it sets the vertical gap. There is no separate row-gap and column-gap control for a stack.
  3. Overflow and Layout relationship - Scroll and Wrap only have a visible effect when the stack has a fixed size (set in Layout*link to Layout doc*) that is smaller than the total size of its child elements. If the stack uses Auto or Fill sizing, it expands till the parent container or portal page to fit its child elements, after which overflow will be applied.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Background
  7. Corner Radius
  8. Border
  9. Shadow
  10. Opacity
  11. Image and icon styling
  12. Tab styling