Horizontal layout

Live demo

Renders content horizontally with consistent spacing between all nodes.

Node name : horizontal-layout

Note

You should always use vertical-layout or horizontal-layout to align elements.
In some very rare cases, you may use self alignment directives.

Attributes

Attribute	Type	Required	Default value	Description
space	string (none, small, medium, large , extralarge)	false	small	Space between nodes.
align	string (left, center, right, stretch, space-between)	false	left	Horizontal alignment.
vertical-align	string (top, center, bottom, stretch, baseline)	false	stretch	Vertical alignment.
wrap	bool	false	true	Value indicating whether the content is wrapped.

Note

By default, a horizontal-layout will take all the available width.

Examples

List of field

<horizontal-layout>
    <form-field property-name="Name" />
    <form-field property-name="Email" />
</horizontal-layout>

Horizontal alignment

<horizontal-layout align="left" >
  <text>My</text>
  <text>content</text>
</horizontal-layout>

<horizontal-layout align="center" >
  <text>My</text>
  <text>content</text>
</horizontal-layout>

<horizontal-layout align="right" >
  <text>My</text>
  <text>content</text>
</horizontal-layout>

Vertical alignment

By default, <horizontal-layout> only takes the minimum height required by its content. Therefore, to be able to vertically align its content with top, center or bottom, <horizontal-layout> must be taller than its content.
Here we use layout:height="fill" to make it take all the available height in the screen.

<horizontal-layout vertical-align="center" layout:height="fill">
  <text size="small">Total</text>
  <text size="extralarge" weight="stronger">1 250 €</text>
  <badge value="Paid" severity="positive" />
</horizontal-layout>

Rendering of this template for each value of vertical-align (the dashed frame is the <horizontal-layout>):

Total1 250 €Paid

vertical-align="top"

Total1 250 €Paid

vertical-align="center"

Total1 250 €Paid

vertical-align="bottom"

Total1 250 €Paid

vertical-align="stretch" (default)

Total1 250 €Paid

vertical-align="baseline"

Baseline alignment

vertical-align="baseline" aligns the children on the baseline of their first line of text, like the CSS align-items: baseline. Use it when a single row mixes several font sizes (for example a small label, a large value and a badge): the texts line up on the same line, whatever the height of each element's box.
Unlike the other values, it does not need a taller <horizontal-layout>.

<horizontal-layout vertical-align="baseline">
  <text size="small">Total</text>
  <text size="extralarge" weight="stronger">1 250 €</text>
  <badge value="Paid" severity="positive" />
  <text size="small" layout:width="80">Paid by bank transfer</text>
</horizontal-layout>

Result, compared with vertical-align="bottom":

Total1 250 €PaidPaid by bank transfer

bottom: the bottoms of the boxes are aligned, not the texts

Total1 250 €PaidPaid by bank transfer

baseline: the texts share the same line

Note

full-height="true" forces the children to stretch and therefore overrides vertical-align, including baseline.

Vertical and horizontal alignment

<horizontal-layout align="center" vertical-align="center" layout:height="fill">
  <text>My</text>
  <text>content</text>
</horizontal-layout>