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/HELP11/pages/9711194912.
You can add styles to an individual component using its properties → Style Settings section; see Component Reference Information. 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 Create New.
- Set the style options you want (described below).
- Open the properties for a component.
- In the Shared Styles section, click . PhixFlow opens a repository list of the styles available in your application. Show a Detailed List
- Drag the style into the shared styles grid.
If you want your application to have components that all look the same, you can design them once, then add them to a Using and Creating Palettes.
For information about the properties toolbar, and about the sections Parent Details, Analysis Models, Description and Audit Summary, see Common Properties. We recommend you always add a Description that explains the purpose of the item you are creating.
For a full list of all the PhixFlow property tabs and windows, see Properties, Windows, Menus and Toolbars.
Specify width and height values with their units, for example %, px or em.
Basic Settings
Field | Description |
---|---|
Name | Enter the name for a style |
Hidden | to hide the component from application users. Tick 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:
|
Border Width | Enter 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. |
Background Colour | |
Background Image | Select an image from the drop-down list. To see the repository list of images uploaded to the current application, click . List Images To add a new image, click Image properties. Create New. PhixFlow opens the |
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:
|
Background Attachment | Select how the image is to be fixed:
For an example of how these work, see css-tricks.com background-attachment. |
Background Position | Set the position of a background image; see w3schools background-position. |
Background Size | Set the size of a background; see w3schools.com background-size. |
Text Colour | Click on the sample square to open a colour picker and select a colour for text. (see Border Colour, above.) |
Font | Specify a font point size; see w3schools.com font. |
Font Size | Specify a font point size; see w3schools.com font-size. |
Font Weight | Select how bold the text appears:
|
Font Style | Select how angled the text appears:
|
Text Align | Select how the text aligns within the component's space:
|
Read Only | to make a component read-only. Tick |
Show Horizontal Scrollbar | Add a horizontal bar to the component so the user can scroll left and right if the content extends beyond the edges. |
Show Vertical Scrollbar | Add a vertical scrollbar to the component, so the user can scroll up and down if the content extends beyond the top/bottom. |
Number Format | 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 | 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. |
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.
- Click to select the item and start to drag it in the direction of the target.
- At the edge of the component, pause the mouse pointer.
- 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.
Field | Description |
---|---|
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. You can this property whilst working in a screen, by: Untick
|
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:
|
Direction | If a direction is selected, components inside this container will be distributed in the selected direction.
|
Wrap | This field is only visible if a direction is selected. Wrap affects how the components wrap when there is less space available.
|
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).
|
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).
|
Read only | If 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 CSS Properties.
Create New to add a new CSS style; seeThe Order in Which Styles Are Applied
PhixFlow applies styles in the following order:
- Shared styles
- CSS properties
- Style Settings
- Conditional Formatting
- Position Settings
This means a style or position setting from a shared style is overwritten by the settings on the component.