Versions Compared

Version Old Version 16 New Version Current
Changes made by

Anthony George

Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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:

Properties component properties
  •  properties → Styles tab
  • the Style
Reference Information
  • properties.
For each CSS property, set:

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

Insert excerpt
_property_toolbar
_property_toolbar
nopaneltrue

Insert excerpt
_property_tabs
_property_tabs
namebasic-h
nopaneltrue

Insert excerpt
_parent
_parent
nopaneltrue

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
Insert excerpt
_check_box_tick
_check_box_tick
nopaneltrue
 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.
OrderThe order in which the style element will be applied.
Cycle Size
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 OffsetOptionally, specify where you want the
cycle
formatting to start after the first child. For example, to apply the formatting to the second item, instead of the first, enter 2.

Insert excerpt
_audit
_audit
nopanel

Using Cycle Size and Offset

Use Cycle Size and Offset to

true

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
cycle size,
  • N-th Child
  • x is the
current cycle
  • current N-th Child
  • b is the
offset.
  • N-th Child Offset 

For example, to apply the CSS formatting:

  • to the 5th child only, leave the
Cycle Size empty
  • N-th Child empty and set the
Offset 
  • N-th Child Offset to 5.
  • alternate children, starting with the second, (2, 4, 6...) set the
Cycle Size  to
  • N-th Child to 2 and the
Offset 
  • 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
Cycle Size  to
  • N-th Child to 3 and the
Offset to 11.
  • N-th Child Offset to 11.

Live Search
spaceKey@self
additionalnone
placeholderSearch all help pages
typepage

Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


Learn More

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

Insert excerpt
_terms_changing
_terms_changing
nopaneltrue