Versions Compared

Version Old Version 18 New Version Current
Changes made by

Fiona Sargeant

Anthony George

Saved on

Key

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

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_toolbarnopaneltrue Insert excerpt_property_tabs_property_tabsnamebasic-hnopaneltrue Insert excerpt_parent_parentnopaneltrueFieldDescriptionCSS 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_ticknopaneltrue to indicate the value is an expression.State

Choose one of:

  • Focus
  • Mouse Down
  • Move Over
    • Read Only

    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:

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

    Using

    Cycle Size and

    N-th Child and N-th Child Offset

    Use Cycle Size and Offset to 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 cyclecurrent 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  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