Skip to content
English
  • There are no suggestions because the search field is empty.

How to Use Vertical Alignment in Widgets?

Control how content is positioned within a widget

1. Vertical Alignment controls how content is positioned vertically within a Row, Container, or Block (top, middle, bottom, or space between). It only works if there is enough height in the column—such as when "Adjust to fit the screen height" is enabled or extra height is added—because there needs to be extra space for the content to shift up or down. Select the Row widget

2. Select the "Adjust to Fit the Screen Height" checkbox

3. Select a Vertical Alignment. The following options are available:

  • Top – Aligns content at the top.
  • Middle – Centers content vertically.
  • Bottom – Aligns content at the bottom.
  • Justify (space between) distributes them with equal space in between without stretching the elements themselves.

The Row's content is now vertically aligned to the middle

4. Click "Save" to confirm the changes

5. Some widgets, like Counter and Circular Progress Bar, also have Vertical Alignment to control how their inner content (like numbers or progress values) is positioned inside the widget itself. Select the middle Vertical Alignment for Before Value

Vertical Alignment will only work if the values have different Text Style font sizes, so there's plenty of space for them to move around when selecting the alignment

6. Top Vertical Alignment

7. Bottom Vertical Alignment

8. Click "Save" to confirm the changes