Vertical layout

Live demo

Renders content vertically with consistent spacing between all nodes.

Node name : vertical-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)	true	stretch	Horizontal alignment.
vertical-align	string (top, center, bottom)	false		Vertical alignment.

Note

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

Note

By default, children nodes of a vertical layout will have their width expanded to fill their container.
Children nodes width can be changed by setting a layout:width directive on them.

Examples

List of field

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

Datagrid which displays a toolbar, a datagrid and a pagination bar one below the other
The datagrid expands to fill all the available vertical space inside the vertical layout.

<vertical-layout layout:height="fill"><!-- Expands to take all available height -->
  <toolbar />
  <datagrid layout:height="fill"/> <!-- Expands to take all available height -->
  <pagination-bar />
</vertical-layout>

Horizontal alignment

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

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

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