This page is for application designers who want to know more details about how to set sizes and positions for layout components.

Overview

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).

...

Position settings can be:

• absolute, where set the location of a component with in its parent.  This can be useful for logos, but remember 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 as the screen size changes. Use relative positioning if you want your application layout to be responsive to different screen sizes.

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.

...

For example to fix something to the top left of its parent area, set 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

In this case the parent area properties are influencing By setting the properties on a parent area, you can determine how the child objects are positioned on the screenrelative to each other.

To set how components align, use Style Settings → Direction

• Row puts components next to each other until the horizontal space is filled. It will then start a new row.
• Column puts components below each other until the vertical space is filled. it will then start a new column.

For maximum flowynessAdditional style settings affect the child objects. The following settings provide very responsive design.

• 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.
• Justify:

...

• Flex Start - tells the first component to be in the top left
• Align: Stretch

...

Using Flex box

...

• - 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.

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.

...