The container types Sequence, Swap container and Container (Free positioning) use the Absolute positioning (Free positioning), in which Sub-elements can be positioned freely after selection with the help of the mouse (drag and drop) or the keyboard arrows. When inserting new elements into a container with free positioning, the elements are centered within the container. With the help of the Position options X and Y in the main toolbar or in the properties dialog of the element, you can then precisely position elements. Similarly, you can move selected items using the keyboard's arrow keys. Furthermore, there is the possibility to move elements with the help of the mouse, whereby the elements are shifted in 5 px steps. Pressing the Alt key simultaneously moves in 1 px increments.
In addition following the keyboard shortcuts are also available to you as auxiliary functions which are also offered as buttons in the Inspector:
- Maximize (Alt + M): With the help of the Maximize button, the selected element is maximized and centered on the size of the parent container.
- Center horizontally (Alt + H): The center horizontal button is used to position the selected element horizontally centered.
- Center vertically (Alt + V): The center vertical button is used to position the selected element vertically centered.
For elements that are located within a container with a free positioning, the functions Alignment and Margin are not available. If several elements are selected, the corresponding position settings in the toolbar are applied to all selected elements.
2. Relative positioning (Vertical/Horizontal) - linear layout
When creating a container, the default layout is the free layout, which can be changed in the properties settings to the linear layout type Vertical/Horizontal. According to the setting of the Direction function in the Layout section, the elements inserted in the container (Vertical/Horizontal) are arranged side by side (horizontally) or one below the other (vertically). In addition, it is possible to position the inserted elements more precisely by adjusting the Padding function of the container or by using the Margin and the Alignment functions of the inserted element.
3. Special cases of positioning
For functional or technical reasons, some container elements have a special behavior regarding the positioning of sub-elements. The following container elements have a special behavior in positioning:
Please note:
The different element positioning of the different container types leads to the different presentation of the elements within a container when changing the layout type.
- Overflow container: Within an overflow container, fixed size elements can only be positioned one below the other.
- Sequence: Within a sequence, only one element is displayed at a time, whereby the element in the sequence can be freely positioned like in a container (free positioning). The functions margin and alignment are not available for sub-elements of the sequence.
- Swap container (navigation, condition): In a swap container only one element is displayed at a time. The display of further sub-elements of the swap container is controlled by display conditions or the navigation function. Elements in a swap container can be freely positioned like in a container with a free layout. The functions margin and alignment are not available for sub-elements.
Please note:
The different element positioning of the different container types leads to the different presentation of the elements within a container when changing the layout type.