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.
| Insert excerpt |
|---|
| _property_toolbar |
|---|
| _property_toolbar |
|---|
| nopanel | true |
|---|
|
| Insert excerpt |
|---|
| _property_tabs |
|---|
| _property_tabs |
|---|
| name | basic-h |
|---|
| nopanel | true |
|---|
|
| Insert excerpt |
|---|
| _parent |
|---|
| _parent |
|---|
| nopanel | true |
|---|
|
| 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 | | Insert excerpt |
|---|
| _check_box_tick |
|---|
| _check_box_tick |
|---|
| nopanel | true |
|---|
|
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. |
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 Childx is the current N-th Childb 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.