Page Comparison

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

...

• Specify a fixed size in pixels.
  Set Position Settings → Width and Height 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.
  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 using a ratio. 
  Set a Style Settings → Grow Factor.  For example, enter 2 to allow a component to take up twice the space as its siblings.
• Allow layout components to expand to the space they need, pushing the parent container to expand beyond the screen.
  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.

...

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

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

...

...

...

...

...

...

...

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

...

...