This page is for application designers who want to know more details about know  how to set sizes position, size and positions flow 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 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 different screens the window being resized or different screen dimensions (desktop or mobile). This page , and its videos explain explains key concepts that you need to understand how about how layout components can be positioned and sized on a screen. The videos show , 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 selected one component , or use the shared styles Shared Styles to apply the same formatting to multiple components.

• Applies to To configure the selected layout component only, use:
  • 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 styleShared Styles: Basic Settings options to set To configure multiple components in the same way, use Shared Styles →  Basic Settings These include settings for borders backgrounds and setting scrollbars. You can also add set more options by adding CSS Properties to shared styles.

Positioning

Position settings can be:

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

...

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. Set Min/Max hight and width
2. Allow page to expand and set scroll bars on the page Value, e.g. 600pxCreate CSS Properties for CSS Tag: min-height and min-width and a value with a specified number of pixels, for example 600px or 300px
3. 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.

...