Set CSS
Last updated
Last updated
Set CSS is a regular block that allows you to add and/or remove CSS classes from any element on the page or form.
Refer to the Set CSS in Data Design block for dynamically generated content.
The block comes in two modes which are discussed below.
The Mode 1 version of the Set CSS block consists of (from top to bottom):
Element: Selectable Input to choose the element you want to add/remove the CSS classes for.
Add Classes: Input configuration setting to specify classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.
Remove Classes: Input configuration setting to specify classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.
The Mode 2 version of the Set CSS block consists of (from top to bottom):
Element: Value Parameter that accepts either a text value in the form of a CSS Selector or an element value. The Element block comes pre-attached for your convenience but can be removed and customized.
Add Classes: Value Parameter that accepts a text value containing the classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.
Remove Classes: Value Parameter that accepts a text value containing the classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.
The image below shows an example of the Mode 1 version where the CSS class bg-info is being added and the class bg-dark is being removed.
In the next example we see a Mode 2 version where the Element value parameter is attached to a Text block containing a CSS Selector that selects the same element. The Add Classes and Remove Classes value parameters are attached to Variable Value blocks.
NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:
