This page is for application designers who want to know more details about how to set sizes and positions for layout components.
Overview
...
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
When designing screens we must consider how we want the page content to layout (Size and Position) but also how it should respond to its content and the screen it is being viewed on such as different sized monitors or mobile devices.
This page explains key concepts that you need to understand about how
...
layout components can be positioned
...
| Tip |
|---|
In the Theme 2 palette, layout components have been combined into ready-made tiles that you can drag into a dashboard. |
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 several sections where you can affect position, size and flow. You can also apply options to selected component, or use the shared styles to apply the same formatting to multiple components.
- Applies to the selected layout component only
- Style Settings: Auto Size, Direction and options to set scrollbars
- Position Settings: settings to fix the position, size and order of layout components
- CSS Properties: configure less common CSS options, such as z-index.
- Apply to all components that have the shared style
- Shared Styles: Basic Settings options to set scrollbars. You can also add CSS Properties to shared styles.
Positioning
Position settings can be:
- absolute, where set the location of a component with in its parent. This can be useful where you want a component to always appear in the same place, for example a logo. However, it prevents the component from flowing with other things on the screen.
- relative, the component is positioned 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.
| Multimedia | ||
|---|---|---|
|
Absolute or Fixed 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:
- the fixed component's size depends on the 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. This is because components default to a z-index of 1. z-index controls the in front/behind position.
Bringing a fixed object to the front
If you have a fixed component behind another component, you can move it to be in front using the z-index. By default objects have a z-index of 1. To move something in front, in CSS Properties 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, this give you flexibility for adding more layers if they are needed later.
Relative Position
By setting the properties on a parent area, you can determine how the child objects are positioned relative to each other.
...
, sized and made responsive.
Position
Relative Positioning (Recommended)
Setting the properties on a parent area determines how child objects are positioned. such as in a row or column. The following video describe how to position your items:
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
Configuration Options
In the Styles tab for an area we can set the following styles to determine how items held within the area are laid out. PhixFlow uses CSS flexbox to achieve this, for more information on using flexbox visit: a guide to flexbox:
- Direction: the content will be laid out.
- Row puts components next to each other
...
- horizontally.
- Column puts components below each other
...
Additional style settings affect the child objects. The following settings provide very responsive design.
...
- vertically.
- Wrap: allows components to start a new row or column when all space is filled
...
- or the screen size changes
...
- and components
...
- need to flow onto additional rows or columns, rather than disappearing off-screen.
- Justify: determines where content will be placed for example, Flex Start - tells the first component to be in the top left.
- Align: Alignment within the are, for example Stretch - tells each component to stretch to fit the available space. If all components fit on one row, then the components extend to fill the vertical space. If components have to wrap to form a second row, each row will occupy half the vertical space.
There is a Theme 2 demonstration dashboard that you can use to see how this works. In the repository Packages section navigate to Theme2 - App Builder. Right-click T2 - Example Dashboard. and select Display. When you resize the screen, you can see that the different areas move to remain visible in the smaller window.
...
When you change a layout component from flowing within its parent to having a fixed position, depending on other settings:
...
Position can also be set in a shared style which allows you to combine positioning with conditional formatting rules. For example,
- show or hide an area base on an on/off toggle.
- Use the Internal Variable _client.mobile which returns true if the page is being viewed on a mobile device to amend how the screen looks.
Absolute or Fixed Position
Absolute positioning stipulates the a fixed position for an item. For example, to specify a component is always positioned in the top left corner of its parent area, set Position Settings → Top: 0 and Left: 0.
If you have a fixed layout component combined with components that have relative positioning, be aware that:
- 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.
In Front or Behind Another Component
To change which component is in front/behind:
- add a CSS Properties and set:
- CSS Tag:
z-index - Value: this is a whole number that determines how afar in front or behind an item will appear. For example items with a z-index of 20 will appear in fron f items with a value of 10. Consider using a larger increment, for example 10, as this provides the flexibility of adding more layers if they are needed.
Size
To control the size of layout components on a
...
screen, again we can use Relative and Absolute sizing. THe following video helps illustrate how this works:
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
Relative Sizing
- Specify a size that varies as the screen resizes and always occupies the same proportion of space.
Set a percentage in Position Settings → Width and Height withvalue% e.g. 75%.. - Allow the layout component to automatically expand to fit the visible space on screen
...
- .
Set Style Settings → Auto Size ticked.- If the layout component has siblings (components at the same level) they share the space in the flow direction equally.
(To specify the flow direction, in the parent component set Style Settings → Direction.) - Child components may need more space than is available. For example, they may contain more fields than will fit on a screen. In this case the fields will extend outside the boundaries of the parent area.
- If the layout component has siblings (components at the same level) they share the space in the flow direction equally.
...
- Control how much a layout component will expand compared to its siblings using a ratio.
Set a Style Settings → Grow Factor. For example, enter 2 to allow a component to take up twice the space as its siblings. - Allow layout components to expand to the space they need, pushing the parent container to expand beyond the screen
...
| Multimedia | ||
|---|---|---|
|
TILE - area
properties Style 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.
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.
Growth factor the default is for PhixFlow to size components equally, which is the equivalent to a ratio of 1:1. To change that ratio, you can use the Grow Factor option. By setting this to 2, you are telling PhixFlow to size the component to be twice the size (in the grow direction) as other components.
Child objects can push the size of the parent object, for example if you do not know how many fields there will be and you want the area to expand to accommodate the fields.
- Parent container area set to autosize
- Child area for example of a component is much taller, the parent area expands to accommodate the height of the child.
With autosize set note that
A single empty area component in a dashboard will automatically fill all the dashboard space, even though it is empty
...
- .
Set Style Settings → Auto Size unticked.
Remember to enable scroll bars on the parent container using Style Settings → Show Horizontal Scrollbar and Show Vertical Scrollbar. - Allow a layout component to change it's size within a minimum and/or maximum range.
In CSS Properties set CSS Tag:min-heightormax-heightand Value:valuepx e.g. 45px.
Absolute
- Specify a fixed size in pixels.
Set Position Settings → Width and Height withvaluepx.
| Tip |
|---|
Remember that with auto size set: A single, empty area component on a screen will automatically expand to fill all the available screen space, even though if it is empty. It does not expand to accommodate all its content. |
...
If there are more fields than can be displayed in a component you can:
|
...
|
...
- Set Min/Max hight and width
- Allow page to expand and set scroll bars on the page Value, e.g. 600px
In the body switch off autosize
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. |
...
| Multimedia | ||
|---|---|---|
|
...
|
Responsive Applications
Use Positions and Sizes to make your application respond to its content and /or the screen size it is being viewed on. When you combine Auto Size with Style Settings, you can achieve a responsive "flexbox" design very easily.
This is shown in this video:
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
When you set Auto Size and a Direction, PhixFlow provides additional Style Settings for Wrap, Justify and Align. The Align: Stretch option is useful to expand components into the available space perpendicular to the flow direction. For example, in a row, components stretch to fill the vertical space. In a column, they stretch to fill the horizontal space.