Flexible layout

An Element containers can flexibly determine both the orientation and the alignment of its content.

The settings can be made in the 'Layout' properties section of the editor.

Orientation

Determines the arrangement of the child elements.

Vertical

Horizontal

Elements are arranged below each other

Elements are arranged next to each other

images/download/attachments/73604274/image2021-5-26_15-8-50-version-1-modificationdate-1622034533181-api-v2.png

images/download/attachments/73604274/image2021-5-26_15-9-27-version-1-modificationdate-1622034570018-api-v2.png

Alignment

Determines how the elements should be arranged and aligned.
A distinction is made between horizontal and vertical alignment (e.g. left and top).
Depending on the orientation of the container, other alignment options are available in each case.
The icons of the options show how the elements are aligned. The currently selected options are highlighted accordingly.

Vertical option

Horizontal option

images/download/attachments/73604274/image2021-5-26_17-1-50-version-1-modificationdate-1622041313030-api-v2.png

images/download/attachments/73604274/image2021-5-26_15-18-1-version-1-modificationdate-1622035083831-api-v2.png

Alignments where the elements spread over the available space (the last two in each case) are available for the opposite orientation in each case only if the 'Elements can wrap' option is enabled.

If more than one flexible layout container is selected, only the options that are valid for both containers are displayed. e.g.

images/download/attachments/73604274/image2021-5-26_15-21-3-version-1-modificationdate-1622035266258-api-v2.png

Elements can wrap

This option determines whether the elements can wrap in the orientation direction when the space in a row/column is no longer sufficient.

Example

Elements can not wrap

Elements can wrap

images/download/attachments/73604274/image2021-5-26_17-10-13-version-1-modificationdate-1622041816151-api-v2.png

images/download/attachments/73604274/image2021-5-26_17-10-45-version-1-modificationdate-1622041847881-api-v2.png

Special feature: 'Repeating element' and 'Optional elements'

Within a flexible layout container, the orientation of repeated and optional elements also depends on the orientation set.

Example

Alignment: vertical

Alignment: horizontal

images/download/attachments/73604274/image2021-8-31_13-47-20-version-1-modificationdate-1630410441968-api-v2.png

images/download/attachments/73604274/image2021-8-31_13-46-34-version-1-modificationdate-1630410395765-api-v2.png

In addition, the position of the +/- buttons can also be set in the "Layout" properties section.

Examples

Settings

Display

images/download/attachments/73604274/image2021-9-1_8-11-19-version-1-modificationdate-1630476680198-api-v2.png

images/download/attachments/73604274/image2021-9-1_8-17-22-version-1-modificationdate-1630477043199-api-v2.png

images/download/attachments/73604274/image2021-9-1_8-18-49-version-1-modificationdate-1630477130534-api-v2.png

images/download/attachments/73604274/image2021-9-1_8-18-26-version-1-modificationdate-1630477107637-api-v2.png

images/download/attachments/73604274/image2021-9-1_8-19-36-version-1-modificationdate-1630477177809-api-v2.png

images/download/attachments/73604274/image2021-9-1_8-19-58-version-1-modificationdate-1630477199907-api-v2.png