...
To size layout components on a dashboard you can use
Width Height
...
- set the width and height
- set a size either proportionally, using a percentage or with a fixed value in pixels
- Autosize - works with flex box to take up space
- Push depending on children
| Multimedia | ||
|---|---|---|
|
TILE - area
properties Position Style Settings
Fixed size using pixels
...
Autosize depends on the parent object having a flex box set.
Autosize uses the available space
Style Settings → Autosize tick
Howmuch space occupied depends on
- other component - if it has a minimum or fixed width set or also has autosize
In the video, 2 components with autosize each take up 50% of the row. When the map does not have autosize, it takes up its minimum space whilst the tile to its left expands to fill the available space
Components only "grow" in the direction in which the parent allows them to flex. For example, if the parent has a Direction of Row, components adjust to fit the width available in the row. if the parent has a Direction of Column, components adjust to fit the height availbable in the column.
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.
...