...
When you are designing GUI screens for an application, it can be tricky to get the various components to size and to change in response to different screens (desktop or mobile).
When changing the size and position of layout components, you need to choose which level you want to apply the change. In the properties tab for layout components there are three sections you can use:
- Position Settings: set these common size and position options that only affect the selected layout component
- CSS Properties: also applies only to this component. CSS Properties lets you set less common CSS options, such as z-index.
- Shared Styles: you can set the size and position once and then apply it multiple components by sharing the style.
Positioning
Position settings can be:
...
| Multimedia | ||
|---|---|---|
|
Absolute or Fixed Position
To make a layout component fixed, you can use the options available in the following sections of the layout component properties.
Position
...
...
For example to fix something to the top left of its parent area, set Position Settings Top to 0 and Left to 0. Where you have a fixed layout component combined with components that have relative positioning, be aware that:
...
| Note |
|---|
When you change a layout component from flowing within its parent to having a fixed position, depending on other settings:
|
Position Settings (Object Level)
o Value entered directly into the fields in PhixFlow and get applied to the selected object.
The CSS is constructed using all of these elements each adding and overriding to the elements before it.
Positioning (Video: Positioning)
• Absolute
o the element is positioned absolutely to its parent. This can be thought of as a fixed position as the element will be taken out of the flow.
Example use: positioning a logo.
• Relative
o The element is positioned relative to its normal position and siblings. The design can be thought of as flowing (or flexing).
Example use: applied to elements such as fields that will be used to create a responsive application.
...
Size
To size layout components on a dashboard you can use
Width Height
Proportional, percentage
Autosize - works with flex box to take up space
Push depending on children
| Multimedia | ||
|---|---|---|
|
TILE - area
properties Position Settings
Fixed size using pixels
Width: 300px
Height: 300px
Fixed size using percentage
Width: 75px
Height: 75px
Autosize depends on the parent object having a flex box set
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.
...