Style
- Fiona Sargeant (Unlicensed)
- Zoe Baldwin
- Anthony George
- Ian Fitzgerald (Unlicensed)
This page is for screen designers. It 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, e.g. a component
- used to provide default formatting, e.g. on selected grid rows
The 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 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 Styles tab→ 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:
- In the Repository for your application, find Styles
- Click Create New
- Set the style options you require (described below)
- Open the Properties tab for a component
- In the Shared Styles section of the Styles tab, click - PhixFlow opens a Repository list of available styles in your application
- Drag the Style from the Repository into the Shared Styles section of the component
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.
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.
New Style - Basic Settings
Field | Description |
---|---|
Name | Enter the name for a style |
Description | Enter a description of the style |
CSS Properties
A list of CSS properties. Click Create New to add a new CSS style; see CSS Properties..
New Style & Component - Style Settings
Note: The fields below that only show when creating a new Style or on the Styles tabfor components have been flagged below. Example components are areas, forms, card containers, URL fields and string fields.
Field | Description |
---|---|
Hidden | Tick to hide the component from application users. 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 | Tick 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. |
Cursor | Specify 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. 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:
|
Width | Specify a set width value as a %, px or em. See https://www.w3schools.com/css/css_units.asp |
Height | Specify a set height value as a %, px or em. |
Min Width | Specify a set minimum width value as a %, px or em. |
Min Height | Specify a set minimum height value as a %, px or em. |
Max Width | Specify a set maximum width value as a %, px or em. |
Max Height | Specify 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.
|
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).
|
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).
|
z-index | Specifies the stack order of a component (which component should be placed in front of, or behind, the others). |
Margin |
|
Padding |
|
Border |
|
Border Radius |
|
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. |
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 | 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 Create New. PhixFlow opens the Image properties. |
Size | Enter values for W and H to specify the width and height of the image. |
Position | Set the position of the image:
|
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:
|
Font | Specify a font point, size and colour. |
Text Align | Select how the text aligns within the component's space:
|
Font Style | Select the weight of text or specify any decoration:
|
Type | Select the capitalisation of the text:
|
Spacing |
|
Horizontal Scroll | Add a horizontal bar to the component so the user can scroll left and right if the content extends beyond the edges. |
Vertical Scroll | Add 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. |
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.
|
Transform | Enable to apply a transformation to a component.
|
Prevent Dragging (components only) | Prevents the component being dragged. |
Number Format ( Styles 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 ( Styles 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. |
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 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 the Style Settings.
The Order in Which Styles Are Applied
PhixFlow applies styles in the following order:
- Shared Styles
- CSS properties
- Style Settings
- Formatting Rules
This means a style from a CSS Property is overwritten by the Shared Styles on the component.
Learn More
- Screen Structure
- Sizing and Positioning Screen Content
- Formatting and Styling Grids and Charts
- CSS Properties
For links to all pages in this topic, see Designing Screens.
Terminology changes in progress
As part of the redesign of PhixFlow, we are changing the following terms:
dashboard → screen
stream → table
stream attributes → attributes
stream item → record
stream set → recordset
stream view → view
stream item action → record-action
stream action → table-action
driver class → database driver