This page is for application designers who want to know  how to set position, size and flow for layout components.

Overview

When you are designing GUI screens for an application, it can be tricky to get the various components to appear exactly how you where them to go. On top of this you have the challenge of making the components look good when they move in response to the window being resized or different screen dimensions (desktop or mobile). This page explains key concepts that you need to understand about how layout components can be positioned, sized and made to flow. The videos illustrate the concepts using the dashboard example available from the Theme 2 package.

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 one component or use the Shared Styles to apply the same formatting to multiple components.

• To configure the selected layout component only, use:
  • Style Settings: Auto Size, Direction and options to set scrollbars
  • Position Settings: fix the position, size and order of layout components
  • CSS Properties: configure less common CSS options, such as z-index.
• To configure multiple components in the same way, use Shared Styles →  Basic Settings These include settings for borders backgrounds and setting scrollbars. You can set more options by adding CSS Properties to shared styles.

Positioning

Position settings can be:

• absolute, whic 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.

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.

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.

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

Size

To control the size of layout components on a dashboard you can set:

• Style Settings → Width and Height, specifying a percentage or a fixed value in pixels.
• Style Settings → Auto Size ticked. The parent area automatically expands to fit the visible space on screen. Child components can expand to fit the space in a row or column of the parent component.
  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.
• Style Settings → Auto Size unticked. The child components can push the parent container to expand beyond the screen, creating the space they need.

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.

1. Parent container area set to autosize
2. 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

An component will not expand to accommodate all its content. It will expand to fit the available space. Where there are more fields than can be displayed in a component you can:

Either add scroll bars. In Style Settings, select Show Horizontal Scroll Bar or Show Vertical Scroll Bar.

Or untick Autosize in the parent. This allows the child objects to push the container to expand to fit the content. This means you may not have as much control over how much space your area will take up.

1. Create CSS Properties for CSS Tag: min-height and min-width and a value with a specified number of pixels, for example 600px or 300px
2. Enable scrollbars.
   In the video the scrollbars for the dashboard automatically appeared with the components were allowed to expand beyond the visible screen because a shared style had Allow Vertical Scroll Bars ticked. 

In the body switch off autosize

In each tile, add a CSS property and set CSS Tag: min-height

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.

Flex Box (Video: Flexbox)
Column
The content is laid out vertically in a column:
• Wrap: Starts a new column when the existing column is full.
• Justify: Where the content will be placed vertically.
• Align: Where the content will be aligned horizontally
a. Stretch can be selected here to have this object stretch the objects inside it in the direction of the flex i.e. in a column.
Row
The content in laid out horizontally in a row:
• Wrap: Starts a new row when the existing row is full.
• Justify: Where the content will be placed vertically.
• Align: Where the content will be aligned horizontally
a. Stretch can be selected here to have this object stretch the child objects inside it in the direction of the flex i.e. in a row.
Auto size
Auto Size can be applied to objects to make them consume all available space perpendicular to the flex box direction from the parent, when and only when the parent has Flexbox properties set will auto size work.