Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

See Also:

Positioning

Position settings can be:

...

Note

When you change a layout component from flowing within its parent to having a fixed position, depending on other settings:

  • it's size may change
  • it may be behind or in front of another component.

Size

Summary of Size Settings

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

...

Tip

Remember that with auto size set:

A single, empty area component in a dashboard will automatically fill all the visible dashboard space, even though it is empty.

A component does not expand to accommodate all its content. It expands to fit the available space.

If there are more fields than can be displayed in a component you can:

  • Either add scroll bars to the component. In Style Settings, select Show Horizontal Scroll Bar or Show Vertical Scroll Bar.
  • Or allow the parent component to expand by unticking Auto Size in the parent. This allows the child objects to push the container to expand to fit the content. You must then add scroll bars to the parent component.

Multimedia
nameFlexbox.mp4

...

Combining Settings for Responsive Applications

When you combine Auto Size with Style Settings, you can achieve a responsive "flexbox" design.

When you set Auto Size and a Direction, PhixFlow provides additional Style Settings for Wrap, Justify and Align. The Align: Stretch option is useful to expand components into the available space perpendicular to the flow direction. For example, in a row, components stretch to fill the vertical space. In a column, they stretch to fill the horizontal space.

Multimedia
nameFlexbox.mp4