...

Insert excerpt

	_Banners
	_Banners
name	screen
nopanel	true

...

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

...

Sizing and Positioning Screen Content.

You can add styles to an individual component using its properties → 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
Insert excerpt
_new
_new
nopanel true
.
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_list
nopanel true
. 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 Changing or Creating a Palette.

Insert excerpt

	_standard_settings
	_standard_settings
nopanel	true

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

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

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

Image Modified

Background Colour

Background 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
nopanel	true

.

To add a new image, click

Insert excerpt

	_new
	_new
nopanel	true

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

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_tick
nopanel	true

to make a component read-only.

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.

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.

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

...

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

...

screen 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
nopanel	true

this property whilst working in a

...

screen, by:

manually resizing the component
using the
Insert excerpt
_autosize
_autosize
nopanel true
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).

...

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

...

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

Insert excerpt

	_new
	_new
nopanel	true

to add a new CSS style; see CSS Properties.

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

Live Search
spaceKey @self
additional none
placeholder Search all help pages
type page

Panel

borderColor	#00374F
titleColor	white
titleBGColor	#00374F
borderStyle	solid
title	Sections on this page

Table of Contents

maxLevel	3
indent	12px
style	none

Learn More

For links to all pages in this topic, see Designing Screens.

Insert excerpt

	_terms_changing
	_terms_changing
nopanel	true

Versions Compared

Old Version 15

New Version Current

Key

Overview

Basic Settings

Responsive Sizing

CSS Properties

The Order in Which Styles Are Applied

Live Search
spaceKey @self
additional none
placeholder Search all help pages
type page

Page Comparison

Versions Compared

Old Version 15

New Version Current

Key

Overview

Basic Settings

Responsive Sizing

CSS Properties

The Order in Which Styles Are Applied

Live SearchspaceKey@selfadditionalnoneplaceholderSearch all help pagestypepage

Live Search
spaceKey @self
additional none
placeholder Search all help pages
type page