The field style details section comes immediately after the Field Settings section, and can be shown by clicking the Show Field Style Details section.
This section enables us to control the styling and appearance of this field using cascading style sheets (CSS). This approach provides a powerful and flexible method for controlling the appearance of the generated page. In most cases you should find that you do not need to change the default class names applied when adding fields from the palette.
This section provides control over three different types of styling, Background, Control and Disabled. For each one we can provide a set of CSS class names to use, and/or a CSS formatted string to override the classes. The Background styling will be applied to the container element, where as the Control styling is applied to the control element directly. For example, if the field is being used as a text box in a table, the background style may be used to set the size and colour of the table cell, whereas the control style could set the colour and font of the text box itself. The following image shows this structure, and also how the error and hint container fits in. (See the hint and error details section for more information). The disabled styling, if applied, will only be given to the control element; the background styling will be unchanged.
Each type of style also has the option of dynamic or conditional styling. This allows a certain type of styling to be applied only if a given condition is true. For example, you may want to show numerical data in black by default, but highlight values in red if they are negative. You add dynamic styling by clicking on the appropriate 'Add Conditional ... Styling' button, and remove a conditional style by clicking the associated 'Remove' button. Each conditional style will require a data binding to be set to indicate the condition to check for.
It is possible for each type of styling to have any number of conditional styles applied to it, and in addition, each conditional style has the option of being fully dynamic. This means that instead of entering the name of the CSS class to apply directly, a separate binding is required to find the class name to apply.
The Disabled styling section is enabled if the Disable field based on runtime data option is selected in the Visibility Details section. (Or if this field is within a group with the 'disable' option turned on.) If enabled, this style will be applied to the field Control if the data sets that it should be disabled. Again these styles can be static or dynamic, and can be set through classes or CSS strings.
CSS Palette
When you hover over CSS entry fields you should find a CSS Palette pop-up that provides basic CSS override buttons, including Bold, Italic, Underline, Alignment and basic colour pickers. You can click on these icons to create the necessary CSS entries for styling. You can always manually edit CSS strings to suit your exact needs. Please note that anything you enter into the CSS Override fields will appear as inline style attributes within the generated page HTML.