This page is for application designers who want to set the position, size and flow of layout components.
...
- absolute, when you want to configure a specific location for a component within its parent. This can be useful where you want a component to always appear in the same place, for example a logo. For example, you may want the company logo to always appear in the top left of every screen. However, it setting an absolute position prevents the component from flowing with other things on the screen.
- relative, when you want to position the component relative to siblings. This allows items to flow or flex. Use relative positioning if you want your application layout to be responsive to different screen sizes.
...
- the fixed component's size depends on its Position Settings → Width and Height. If no value is set it will have the default minimum size.
- other components will flow over the top of a fixed component.
To change which component is in front/behind, add a CSS Properties and set:- CSS Tag:
z-index - Value to be greater than 1.
2 is sufficient to bring a component to the front. However, if you use a larger increment, for example 10, you have the flexibility of adding more layers if they are needed.
- CSS Tag:
...
To configure how components align, use Style Settings → Settings
- Direction:
- Row puts components next to each other horizontally.
- Column puts components below each other vertically.
- Wrap: Wrap - allows components to start a new row or column when all space is filled. This also means when the screen size changes, the components will flow onto additional rows, rather than disappearing off-screen.
Additional style settings affect the child objects. The following settings provide very responsive design.
...
In each tile, add a CSS property and set CSS Tag: min-height
| Tip |
|---|
Remember, auto size does not mean what you think it means. A component with Auto Size set expands to fill the available space on the screen. If you want a component to expand to accommodate all its content, then untick Auto Size. |
Sizing (Video: SizingObjects)
Absolute and Relative also applies to sizing:
Absolute Size
Set using Position Settings and setting these values using a CSS Style e.g. Shared Style
Relative Size
Relative sizing provides a size relative to its siblings and can also be controlled by its ancestors e.g. a parent area can be set to stretch its children.
• Percentage: This can be set using percentages %, or by implementing CSS Flexbox, float or grid. For example: width 50%, an item will take up 50% of the space provided by its parent.
• Auto size: will consume all available space from the parent, when and only when the parent has Flexbox properties set. Further to this the space consumed will be perpendicular to the Flex e.g. If the parent is set to Flex Row, and the child has auto size ticked, then the child will consume the available space vertically.
• Content Sizing: a parent element will be expanded to accommodate its children. While Auto Size consumes the available space, content sizing will push beyond the available space. Note that Content sizing is not a setting but the lack of an auto size or other constraint being set.
...