Versions Compared

Version Old Version 21 New Version Current
Changes made by

Fiona Sargeant

Zoe Baldwin

Saved on

Key

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

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 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 www.w3schools css for details of CSS.

For more on how positions and styles can affect screen design, see /wiki/spaces/HELP12/pages/9615611081.

You can add styles to an individual component using its properties → Style Settings section; see Component Properties. 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:

  • In the repository for your application, find Styles.
    • Click  Insert excerpt_new_newnopaneltrue.
  • Set the style options you want (described below).
  • Open the properties for a component.
    • In the Shared Styles section, click  Insert excerpt_detailed_list_detailed_listnopaneltrue. PhixFlow opens a repository list of the styles available in your application. 
  • Drag the style into the shared styles grid.
    • Tip

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

    Insert excerpt_standard_settings_standard_settingsnopaneltrue

    Specify width and height values with their units, for example %, px or em.

    Basic Settings

    FieldDescriptionNameEnter the name for a styleHidden Insert excerpt_check_box_tick_check_box_ticknopaneltrue to hide the component from application users.
    Tip

    The data in hidden components does not refresh. If you need the data on a hidden grid to refresh, set the Position Settings: Height and Width to 0. 

    Border Style

    Select a border style:

    • None
    • Hidden
    • Dotted
    • Dashed
    • Solid
    • Double
    • Groove
    • Ridge
    • Inset
    • Outset
    • Initial
    • Inherit
    Border WidthEnter a number to specify how many pixels wide the border should be.Border Colour

    Specify the colour for the border and background. Click on the sample square to open a colour picker and select a color. Click back into the properties tab to close the colour picker.

    Image Removed

    Background Colour

    Background Image 

    AnchorimageimageSelect an image from the drop-down list. To see the repository list of images uploaded to the current application, click Insert excerpt_image_list_image_listnopaneltrue .To add a new image, click  Insert excerpt_new_newnopaneltrue. PhixFlow opens the Image properties.Background Repeat

    PhixFlow assumes you want to use an image to fill the background. For smaller images it will repeat the image to fill the available space. To change this property select one of the options:

    • repeat - repeat the image to fill the space available
    • repeat-x - repeat the image to fill the space horizontally
    • repeat-y - repeat the image to fill the space vertically
    • no-repeat - show a single instance of the image.

    Background Attachment

    Select how the image is to be fixed:

    • scroll  
    • fixed   
    • local  

    For an example of how these work, see  css-tricks.com background-attachment.

    Background PositionSet the position of a background image; see w3schools background-position.Background SizeSet the size of a background; see w3schools.com background-size.Text ColourClick on the sample square to open a colour picker and select a colour for text. (see Border Colour, above.)FontSpecify a font point size; see w3schools.com font.Font SizeSpecify a font point size; see w3schools.com font-size.Font Weight

    Select how bold the text appears:

    • normal (default)
    • bold
    • bolder
    • lighter
    • initial
    • inherit
    Font Style

    Select how angled the text appears:

    • normal
    • italic
    • oblique
    • initial
    • inherit
    Text Align

     Select how the text aligns within the component's space:

    • left
    • right
    • centre
    • justify
    • initial
    • inherit
    Read Only Insert excerpt_check_box_tick_check_box_ticknopaneltrue to make a component read-only.Show Horizontal ScrollbarAdd a horizontal bar to the component so the user can scroll left and right if the content extends beyond the edges.Show Vertical ScrollbarAdd a vertical scrollbar to the component, so the user can scroll up and down if the content extends beyond the top/bottom.Number FormatSelect a number format for number fields and grid cells, if you want to use a different format to the default. The default number format is set in /wiki/spaces/HELPTRUNK/pages/49611187.Date/Time FormatSelect a date format for date fields and grid cells, if you want to use a different format to the default. The default date format is set in /wiki/spaces/HELPTRUNK/pages/49611187.
    Tip

    Grid and card container components that have scrollbars can also scroll automatically. This means users can drag cards or grid items to targets that are currently off-screen.

    1. Click to select the item and start to drag it in the direction of the target.
    2. At the edge of the component, pause the mouse pointer.
    3. PhixFlow then starts to scroll in the direction of your drag.

    Automatic scrolling can be:

    • left or right
    • up or down
    • diagonal.

    Responsive Sizing

    When a user resizes the screen that is displaying the dashboard, PhixFlow can vary the size and position of some components in the screen. To configure this, use the following style settings, which are available for the components:

    • areas
    • forms
    • card containers
    • URL fields
    • string fields.
    FieldDescriptionAuto 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.

    NoteYou can  Insert excerpt_check_box_untick_check_box_unticknopaneltrue this property whilst working in a screen, by:
  • manually resizing the component
    • using the  Insert excerpt_autosize_autosizenopaneltrue context menu option.
    Tip

    Cards cannot be auto sized.

    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). see also CSS justify-content property (w3schools.com).

    • 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, between each component and half spacing between the components and their container.
    • Space Between - Distribute components with equal spacing in between each component, but no spacing between the component and the container.
    • Space Evenly - Distribute components with equal spacing in between each component. and between components 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_new_newnopaneltrue to add a new CSS style; see CSS Properties.

    The Order in Which Styles Are Applied

    PhixFlow applies styles in the following order:

    1. Shared styles
    2. CSS properties
    3. Style Settings
    4. Conditional Formatting
    5. Position Settings
    This means a style or position setting from a shared style is overwritten by the settings on the component.

    Insert excerpt
    _Banners
    _Banners
    namescreen
    nopaneltrue

    This page is for screen designers. It explains the options available for setting styles for borders, backgrounds, fonts etc.

    Overview

    A

    Insert excerpt
    _styles_ccs
    _styles_ccs
    nopaneltrue
     is a container for a set of CSS properties. A style can be:

    • assigned to parts of an application, e.g. a component
    • used to provide default formatting, e.g. on selected grid rows

    The

    Insert excerpt
    _property_tabs
    _property_tabs
    nopaneltrue
     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 tags. PhixFlow combines the selected options and CSS properties when it applies the formatting to your application. See www.w3schools css for details of CSS.

    For more on how positions and styles can affect screen design, see Sizing and Positioning Screen Content.

    You can add styles to an individual component using its

    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
    → Style Settings section; see Component. 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
      Insert excerpt
      _styles_ccs_s
      _styles_ccs_s
      nopaneltrue
    2. Click 
      Insert excerpt
      _new
      _new
      nopaneltrue
    3. Set the style options you require (described below)
    4. Open the
      Insert excerpt
      _property_tabs
      _property_tabs
      nopaneltrue
       for a component
    5. In the Shared Styles section of the
      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
      , click 
      Insert excerpt
      _styles_ccs_icon
      _styles_ccs_icon
      nopaneltrue
       - PhixFlow opens a Repository list of available styles in your application
    6. Drag the
      Insert excerpt
      _styles_ccs
      _styles_ccs
      nopaneltrue
       from the Repository into the Shared Styles section of the component
    Tip

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


    Insert excerpt
    _standard_settings
    _standard_settings
    nopaneltrue

    New
    Insert excerpt
    _styles_ccs
    _styles_ccs
    nopaneltrue
     - Basic Settings

    FieldDescription
    NameEnter the name for a style
    DescriptionEnter a description of the style

    CSS Properties

    A list of CSS properties. Click 

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

    New
    Insert excerpt
    _styles_ccs
    _styles_ccs
    nopaneltrue
     & Component - Style Settings 
    Anchor
    stylesettings
    stylesettings

    Note: The fields below that only show when creating a new

    Insert excerpt
    _styles_ccs
    _styles_ccs
    nopaneltrue
     or on the
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
    for components have been flagged below. Example components are areas, forms, card containers, URL fields and string fields.

    FieldDescription
    Hidden

    Insert excerpt
    _check_box_tick
    _check_box_tick
    nopaneltrue
     to hide the component from application users.

    Note

    The data in hidden components does not refresh. If you need the data on a hidden grid to refresh, set the Position Settings: Height and Width to 0. 


    Read Only

    Insert excerpt
    _check_box_tick
    _check_box_tick
    nopaneltrue
     to make a component 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. All the children of the component will also inherit this property.

    CursorSpecify a cursor style to be displayed when pointing over an component.

    Fit to available space

    (components only)

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

    Manually resizing a component will turn this property off.

    Note

    Cards cannot have this property applied.


    Grow Factor

    (components only)

    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.

    Width

    Specify a set width value as a %, px or em. See https://www.w3schools.com/css/css_units.asp

    HeightSpecify a set height value as a %, px or em. 
    Min WidthSpecify a set minimum width value as a %, px or em. 
    Min HeightSpecify a set minimum height value as a %, px or em. 
    Max WidthSpecify a set maximum width value as a %, px or em. 
    Max HeightSpecify a set maximum height value as a %, px or em. 

    Direction

    (components only)

    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 Fit to available space ticked will be resized.
    • Column Reverse - Components will be distributed as column in reverse order.

    Wrap

    (components only)

    This field is only visible if a direction is selected.

    If enabled, this wraps the components when there is less space available.

    Gap

    (components only)

    This field is only visible if a direction is selected. 

    Define the size of the gap in px between the rows or columns (Direction dependent).

    Justify

    (components only)

    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). See also CSS justify-content property (w3schools.com).

    • 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 Between - Distribute components with equal spacing in between each component, but no spacing between the component and the container.
    • Space Around - Distribute components with even spacing, between each component and half spacing between the components and their container.
    • Space Evenly - Distribute components with equal spacing in between each component. and between components and the container.

    Align

    (components only)

    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.
    • Stretch - Components with no size set in this direction will have their size increased to fill the container in this direction.
    z-index

    Specifies the stack order of a component (which component should be placed in front of, or behind, the others).

    Margin 
    • All - Create space around components, outside of any defined borders.
    • Split - Set the margin for each side of a component (top, right, bottom, and left).
    Padding
    • All - Create space around an component's content, inside of any defined borders.
    • Split - Set the padding for each side of a component (top, right, bottom, and left).
    Border
    • All - Specify the border width in pixels, the colour and style: Solid, Dashed, Dotted, Double or None.
    • Split - Set the border for each side of a component (top, right, bottom, and left).
    Border Radius
    • All - Specify the radius of the component's corners. This allows rounded corners to be added.
    • Split - Set the border radius for each corner of a component (top-left, top-right, bottom-right, and bottom-left).
    Fill

    Specify the colour for background. Click on the sample square to open a colour picker and select a colour. Click back into the properties tab to close the colour picker.

    Image Added

    Opacity

    Specifies the opacity/transparency of a component. Enter a value from 0.0 - 1.0. The lower the value, the more transparent.

    Note: All child components inherit the same transparency.

    Shadow

    Enter a value for x and/or y to specify a horizontal and vertical shadow. The default colour of the shadow is the current text-colour. 

    Enter a value for b to specify a blur radius. The higher the number, the more blurred the shadow will be.

    Image
    Anchor
    image
    image
    Select an image from the drop-down list. To see the repository list of images uploaded to the current application, click
    Insert excerpt
    _image_list
    _image_list
    nopaneltrue
     .

    To add a new image, click 

    Insert excerpt
    _new
    _new
    nopaneltrue
    . PhixFlow opens the Image properties.

    SizeEnter values for W and H to specify the width and height of the image.
    Position

    Set the position of the image:

    • Left
    • Center
    • Right
    • Custom: Enter a value in pixels (px) for where the image should be placed on the horizontal axis
      • This field accepts numbers with or without "px" at the end


    • Top
    • Center
    • Bottom
    • Custom: Enter a value in pixels (px) for where the image should be placed on the horizontal axis
      • This field accepts numbers with or without "px" at the end
    Tip

    Where a single Custom value is provided, the value is used for both horizontal and vertical settings. 


    Repeat

    Anchor
    repeat
    repeat

    PhixFlow assumes you want to use an image to fill the background. For smaller images it will repeat the image to fill the available space. To change this property select one of the options:

    • repeat - repeat the image to fill the space available
    • repeat-x - repeat the image to fill the space horizontally
    • repeat-y - repeat the image to fill the space vertically
    • no-repeat - show a single instance of the image.
    Font

    Specify a font point, size and colour.

    Text Align

    Select how the text aligns within the component's space:

    • left
    • right
    • center
    • justify 
    Font Style

    Select the weight of text or specify any decoration:

    • bold
    • italic
    • underline
    • strikethrough
    Type

    Select the capitalisation of the text:

    • uppercase
    • lowercase
    • capitalise
    Spacing
    • Letter Spacing - Specify the space between the characters in a text.
    • Line Height - Specify the space between lines
    Horizontal ScrollAdd a horizontal bar to the component so the user can scroll left and right if the content extends beyond the edges.
    Vertical ScrollAdd a vertical scrollbar to the component, so the user can scroll up and down if the content extends beyond the top/bottom.
    Absolute Position

    Enable this to position a component in an exact location. Enter values for top, left, bottom, and right to set the location - these values will be relative to the next parent component.

    Note: Absolute positioned components are removed from the normal flow, and can overlap other components.

    See https://www.w3schools.com/css/css_positioning.asp

    Transition

    Change property values smoothly over a given duration, e.g. mouse over on a button. This typically works with CSS Properties.

    Specify the time in seconds. Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

    • Ease - specifies a transition effect with a slow start, then fast, then end slowly 
    • Linear - specifies a transition effect with the same speed from start to end
    • Ease In - specifies a transition effect with a slow start
    • Ease Out - specifies a transition effect with a slow end
    • Ease In Out - specifies a transition effect with a slow start and end
    Transform

    Enable to apply a transformation to a component.

    • Origin - set a component's base placement
    • Rotate - rotates an component clockwise or counter-clockwise according to a given degree. Using negative values will rotate the component counter-clockwise
    • Translate - moves a component from its current position (according to the parameters given for the X-axis and the Y-axis)
    • Scale - increases or decreases the size of a component (according to the parameters given for the width and height)
    • Skew - skews a component along the X and Y-axis by the given angles.

    Prevent Dragging

    (components only)

    		Prevents the component being dragged.

    Number Format

    (

    Insert excerpt
    _styles_ccs_s
    _styles_ccs_s
    nopaneltrue
     only)

    		Select a number format for number fields and grid cells, if you want to use a different format to the default. The default number format is set in /wiki/spaces/HELPTRUNK/pages/49611187.

    Date/Time Format

    (

    Insert excerpt
    _styles_ccs_s
    _styles_ccs_s
    nopaneltrue
     only)

    		Select a date format for date fields and grid cells, if you want to use a different format to the default. The default date format is set in /wiki/spaces/HELPTRUNK/pages/49611187.


    Tip

    Grid and card container components that have scrollbars can also scroll automatically. This means users can drag cards or grid items to targets that are currently off-screen.

    1. Click to select the item and start to drag it in the direction of the target.
    2. At the edge of the component, pause the mouse pointer.
    3. PhixFlow then starts to scroll in the direction of your drag.

    Automatic scrolling can be:

    • left or right
    • up or down
    • diagonal.

    Responsive Sizing

    When a user resizes the screen that is displaying the screen, PhixFlow can vary the size and position of some components (areas, forms, card containers, URL fields, string fields) in the screen. To configure this, use the following style settings:

    • Fit to available space
    • Grow Factor
    • Direction
    • Wrap
    • Justify
    • Align
    • Read Only

    More details on these settings can be found above in Screen Styling

    Live Search
    spaceKey@self
    additionalnone
    placeholderSearch all help pages
    typepage

    Panel
    borderColor#00374F
    titleColorwhite
    titleBGColor#00374F
    borderStylesolid
    titleSections on this page

    Table of Contents
    maxLevel3
    indent12px
    stylenone

    Learn More

    For links to all pages in this topic, see Screens