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:

• the Component properties → Styles tab
• the Style properties.

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, its parent name is shown here. See the Parent Details section on the Common Properties page for more details.

Field	Description
CSS Tag	The 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 - Applies when the component is selected e.g. the cursor is in a form field. Mouse Down - Applies when the right-click of a mouse is pressed on the styled component. Move Over - Applies when the user places the mouse over the styled component. Read Only - Applies when the styled component is set to be read only. Drag Over - Applies when a user drags a file over the styled component e.g. when uploading a file to a File Display component.
Order	The order in which the style element will be applied.
N-th Child	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.
N-th Child Offset	Optionally, specify where you want the formatting 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 N-th Child and N-th Child Offset

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

• a is the N-th Child
• x is the current N-th Child
• b is the N-th Child Offset 

For example, to apply the CSS formatting:

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