Form layout
In this chapter, the correct structure and functioning of form layouts are explained.
Most elements available in the Form designer offer the 'Layout' property category, where, for example, the size of the element can be defined (see image).
In addition to a Css class (1) Definable via the expert settings of the Styles), both the size (2) and the minimum size (3) of an element can be defined.
►NOTE◄ Depending on the element type, it may be possible that not all or any setting options are available.
Size specifications
The size of an element can be defined separately in height and width directions.
Three modes are supported:
Fixed: The size is specified as a fixed value in pixels.
Percent: The size is given as a percentage value.
Here the dimension is calculated relative to the parent element.
A percentage sized element will be as large as the remaining available space within its parent element.
The remaining space results from the size of the parent element minus the content with the fixed or automatic size.
This fact also has the consequence that elements with percentage size share their space on the same layer.
Example 1: A column layout container with a defined width of 300 pixels (blue frame) has two child button elements with a respective width of 100%.
Example 2: This is the same scenario as in example 1, but the first button has a fixed width of 50 pixels. Button 2 takes up the remaining space.
Auto: The size of the element automatically adjusts to the size of its content.
Relative to font size: the size of the element is specified relative to the font size currently in use.
Important: Nesting of percentage-sized elements in containers with automatic size
It should always be remembered that percentage values depend on the size of the parent element, where an automatic value is based on the size of the content. Therefore, percentage sizes in the content should be avoided in combination with automatic sizes in the parent element, otherwise the behaviour may be undefined. The reason for this is made clear once again below:
Initial situation: Container A (height: auto) contains element B (height: 100%). When displaying, the size of A is to be determined first: Height A = Height B (because Height A 'auto'). Since the size of A is based on the size of its contents, the size of B must therefore first be determined: Height B = Height A (because Height B is '100%'). Now the height of A would have to be determined again, which leads to a so-called 'chicken-and-egg' problem. The sizes of both elements are therefore not defined, which in some cases can lead to elements not being displayed at all or only being displayed very small. Likewise, it could happen that elements become millions of pixels in size (e.g. table based components).
For compatibility with older Lobster Data Platform / Orchestration versions, some container elements take over the percentage size of their directly subordinate elements, but this can sometimes have confusing effects. However, this phenomenon is automatically disabled for newly inserted containers as of version 4.2.0 and can be enabled/disabled with the 'Inherit percent size from children' layout option.
Layout structure
For creating a neatly divided form, the form designer offers various layout elements such as tabs, expandable containers, column and row layouts. The basic division of the form as well as the orientation of the visual elements is mainly done by the so-called column and row layout containers, which are described in more detail below.
Row layout
A row layout container aligns its child elements with each other (in rows).
Column layout
A column layout container aligns its child elements side by side (in columns).
Example layout by nesting row and column layouts
The layout below shows the layout of a classic application, which is divided into a header, body and footer.
|
Element hierarchy |
Layout with size settings |
|
|
|
While the header and footer each have fixed heights, the body area (BODY) takes up the remaining space in height.
If the space for the form becomes too low, the minimum height of the body area ensures that it must be at least 400 pixels high. This prevents the content from being pushed too far together. The same applies to the page area (SIDE) and the content (CONTENT), which define minimum widths of 200 and 300 pixels respectively.
Content overflow
Designing a flexible layout also includes defining how containers behave when their contents overflow. We speak of an overflow when the content of a container becomes larger than its defined size.
There are three different possibilities of how a container deals with overflowing content. These are selectable via the 'Element container' property category.
Scroll: The overflowing content can be scrolled (on desktop PC versions of the browsers scrollbars are automatically displayed).
Visible: The overflowing content remains visible, but overlaps the following elements (see the button below).
Hidden: The overflowing content is simply cut off:
►NOTE◄ A container can overflow only if it has a defined size (not 'auto')