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

...

Size

Summary of Size Settings

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

...

:

• Specify a fixed size in pixels.
  Set Position Settings → Width and Height, specifying a percentage or a fixed value in pixels.Style Settings → Auto Size ticked. The parent area automatically expands  with valuepx.
• 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 with value%.
• Allow the layout component to automatically expand to fit the visible space on screen. Child components can expand to fit the space in a row or column of the parent component. .
  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.
• Control how much a layout component will expand compared to its siblings. 
  Set a Style Settings → Auto Size unticked. The child components can push Grow Factor. 
• Allow layout components to expand to the space they need, pushing the parent container to expand beyond the screen, creating the space they need.
  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.

The following video shows how the different settings affect layout components in a dashboard.

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 onTo set the size of  layout component, in its properties →  Position Settings, set the Width and Height of the component. You can specify:

• a percentage, for example 60%, so that the component always occupies the same proportion of the available screen space
• a number of pixels, for example 600px. The component always occupies this amount of space, even as the screen changes size.

How adjacent components behave depends on:

• whether or not the child component has Style Settings → Auto Size set
• The flow direction (row or column) set in the parent component.

When all 

• With autosize, the component expands to fill the available space.
• Multiple components in the same row or column share the available space equally.
• 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.

...

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.

...