This page is for application designers who want to know  how to set the position, size and flow for of 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 where you where want them to go. On top of this you have the challenge of making the components look good when they It can also be a challenge to make the components move in response to the window being resized or when the application is displayed on devices with 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  

The videos illustrate the concepts using a screen designed using the Theme 2 palette. If you have Theme 2 installed, you can use find the example dashboard example available from the Theme 2 package.in the repository. Navigate to Packages  → Theme2 - App Builder. Right-click T2 - Example Dashboard and select Display. 

In the properties tab for layout components there are several sections where you can affect configure position, size and flow. You can also apply options to one component or use the Shared Styles to apply the same formatting to multiple componentschange the formatting of one component. If you need to make the same change to several components, use the Shared Styles.

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

...

Position settings can be:

• absolute, whic set the location of a component with in when you want to configure a specific location for a component within 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, when you want to position 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 To specify a component is always positioned in the top left corner of its parent area, set Position Settings   → Top to : 0 and Left to : 0. Where
If you have a fixed layout component combined with components that have relative positioning, be aware that:

• the fixed component's size depends on the its 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 To change which component is in front/behind position.

Bringing a fixed object to the front

...

• , add a CSS Properties and 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 have the flexibility
  for
  • of 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 configure 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.horizontally.
• Column puts components below each other until the vertical space is filled. it will then start a new columnvertically.

Additional style settings affect the child objects. The following settings provide very responsive design.

...

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.

...