CSS Properties

This page provides details of the properties for setting custom CSS, which is part of screen design.

Overview

This tab is not available from the repository. It opens from:

Use this tab to set custom CSS for components on a screen.

Property Pane Toolbar

For information about the toolbar options, see the Common Properties page, Toolbars and Controls section.

 Properties Tab

Parent Details

If this item is within or belongs to another, it's parent name is shown here. See the Common Properties page, Parent Details section for more details.

FieldDescription
CSS TagThe the CSS property.
Value

Enter the value for the property; see https://www.w3schools.com/cssref/.

If the value is an expression, you can use the internal variable _current to refer to all the data in the current row of a grid.

Expression Tick to indicate the value is an expression.
State

Choose one of:

  • Focus
  • Mouse Down
  • Move Over
  • Read Only
OrderThe order in which the style element will be applied.
Cycle Size

Optionally enter a number to indicate the recurrence of this CSS formatting. For example to use this CSS for: 

  • alternate children, enter 2
  • every 5th child enter 5.
OffsetOptionally specify where you want the cycle to start after the first child. For example, to apply the formatting to the second item, instead of the first, enter 2.

 Audit Tab

Audit Summary

See the Common Properties page, Audit Summary section.

Using Cycle Size and Offset

Use Cycle Size and Offset to specify different formatting for children. The two fields together work as an ax + b expression, where:

  • a is the cycle size,
  • x is the current cycle
  • b is the offset. 

For example, to apply the CSS formatting:

  • to the 5th child only, leave the Cycle Size empty and set the Offset to 5.
  • alternate children, starting with the second, (2, 4, 6...) set the Cycle Size  to 2 and the Offset to 2.
  • not format the first 10 items, but then format every 3rd child (i.e. 11,14,17...), set the Cycle Size  to 3 and the Offset to 11.

Sections on this page

Learn More

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