Versions Compared

Version Old Version 2 New Version 3
Changes made by

Fiona Sargeant (Unlicensed)

Fiona Sargeant (Unlicensed)

Saved on

Key

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

You can add styles directly in the repository, or in a layout component's properties → Style Settings section; see Layout.These options construct CSS styling for the layout component; see This page explains the options available for setting styles for borders, backgrounds, fonts etc.

Overview

A style is a container for a set of CSS properties. A style can be assigned to parts of an application, such as layout component. You can also use a style to provide default formatting, for example on selected grid rows. The style properties tab makes it easy to configure the CSS for your application, using tick boxes, lists and colour pickers. For complete flexibility, you can use the CSS Properties section to enter CSS strings. PhixFlow combines the selected options and CSS properties when it applies the formatting to your application. See https://www.w3schools.com/cssref/ for details of CSS. You can also create custom styling, see CSS Properties.

You can add styles to an individual component using its properties → Style Settings section; see Layout. However, if you want your application to have consistent styling, we recommend you create a style and then share it with multiple components.

To create and share formatting:

  1. In the repository for your application, find Styles.
  2. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
    .
  3. Set the style options you want (described below).
  4. Open the properties for a layout component.
  5. In the Shared Styles section, click 
    Insert excerpt
    _detailed_list
    _detailed_list
    nopaneltrue
    . PhixFlow opens a repository list of the styles available in your application. 
  6. Drag the style into the shared styles grid.
Tip

If you want your application to have layout components that all look the same, you can design them once, then add them to a Palette. 


Insert excerpt
_standard_settings
_standard_settings
nopaneltrue

...

FieldDescription
Auto Size

If ticked this component will resize to fill the available space in the direction set on the parent. If the user resizes the dashboard the components will resize. If multiple components have auto size selected, the available space will be shared between auto sized components.

Note

You can 

Insert excerpt
_check_box_untick
_check_box_untick
nopaneltrue
 this property whilst working in a layout, by:

  • manually resizing the component
  • using the 
    Insert excerpt
    _autosize
    _autosize
    nopaneltrue
     context menu option.


Grow Factor

The number representing how much a component can resize.

When you have several components, PhixFlow uses the difference in their numbers to allocate space. For example, if you have 3 components (A, B and C) with their grow factor set to:

  • the same value, 1,  for all components, PhixFlow allocates the available space equally to components A, B and C
  • different values, A=1, B=2 and C=3, PhixFlow divides the space into 6 equal portions and allocates:
    • 1 portion to A
    • 2 portions to B
    • 3 portions to C.
Direction

If a direction is selected, components inside this container will be distributed in the selected direction.

  • Row - Components will be distributed as a single row, in order. The components will shrink to fit if the window is made smaller than the width of the components.
  • Row Reverse- Components will be distributed in rows, in reverse order.
  • Column - Components will be distributed as a single column, in order. If the window height is made smaller only components with Auto Size ticked will be resized.
  • Column Reverse - Components will be distributed as column in reverse order.
Wrap

This field is only visible if a direction is selected. Wrap affects how the components wrap when there is less space available.

  • Wrap - wrap the components starting with either the right column, or the bottom row.
  • Wrap Reverse - wrap the components starting with the left column or the top row.
  • No Wrap - never wrap. 
Justify

This field is only visible if a direction is selected. Justify affects the position of the components in the direction set (horizontal for row, vertical for column). 

  • Flex Start - Components will be positioned from the start edge of the container, with no spacing between them.
  • Flex End - Components will be positioned so the last component aligns with the end edge of the container, with no spacing between them.
  • Center - Components will be centred in the direction set, with no spacing between them, and equal spacing between the edge of the container and the first and last component.
  • Space Around - Distribute components with even spacing around each component.
  • Space Between - Distribute components with even spacing between each component, but no spacing between the component and the container.
Align

This field is only visible if a direction is selected. Align affects the position of the components perpendicular to the direction set (vertical for row, horizontal for column).

  • Flex Start - Components will be positioned from the start edge of the container, with no spacing between them.
  • Flex End - Components will be positioned so the last component aligns with the end edge of the container, with no spacing between them.
  • Center - Components will be centred, with no spacing between them, and equal spacing between the edge of the container and the first and last component.
  • Baseline - Position components so their baselines align.
  • Stretch - Components with no size set in this direction will have their size increased to fill the container in this direction.
  • Space Around - Distribute components with even spacing around each component.
Read onlyIf ticked this component will be marked as read only. For input fields this means that the data in them will not be editable and for buttons it will make the button unusable. If the component is a form or an area, marking it as read only will mark ALL input fields in that area / form as read only, but buttons will NOT be automatically marked as read only

CSS Properties

A list of CSS properties. Click 

Insert excerpt
_add
_add
nopaneltrue
 to add a new CSS style; see CSS Properties.