You can define the overall appearance and style of an adaptive form by specifying a CSS file or a client library. Also, you can apply inline CSS styles to individual adaptive form components and preview the changes on the fly.

With the help of the following image of a text component, let’s first learn about the different part of an adaptive form component on which you can apply styles.

Parts of an adaptive form component

Different parts on an adaptive form component called out in the above image are as follows:

A. Caption: caption for the component

B. Field: area that encompasses all parts of the component

C. Widget: area where user specifies or selects a value for the field

D. Help: short description, long description, and help indicator for the component

Apply inline CSS properties

To add inline styles to a component:

  1. Right-click an adaptive form component and click Edit. The Edit component dialog opens.

  2. Click to open the Styling tab.

    Styling tab in Edit Component dialog
  3. Click a tab in the Inline CSS Properties section to specify CSS properties. For example:

    1. In the Field tab, click Add Item. A row with two fields gets added.
    2. In the first field from left, specify a CSS3 property you want to apply. For example, border. You can also select a property by clicking the down-arrow button. Note that the drop-down list is not exhaustive and you can specify any supported CSS3 property name in this field.
    3. In the adjoining field, specify a valid value for the specified CSS3 property. For example, 3px solid black.
    4. Click Add Item to specify another property and its value.

  4. Similarly, you can go to other tabs and apply styles for Widget, Caption, and Help.

  5. Click OK to confirm the changes or Cancel to exit the dialog without any changes.

Example: inline styles

The following images depict a text field before and after inline styles are applied to it.

Text box component before applying inline style properties

Notice the change in text box style as shown in the following image after applying the following CSS properties.

Tab

CSS property

Value

Effect

Field

border

2px solid black

Creates a Black 2px wide border around the field

Widget

background-color

#6495ED

Changes the background color to CornflowerBlue (#6495ED)

Note: You can specify a color name or its hex code in the value field.

Caption

width

100px

Fixes the width as 100px for the caption

Help – Question Mark

color

green

Changes the color for help indicator to Green

Help – Question Mark

content

"\e086"

Changes the help indicator from a question mark to a bootstrap glyphicon with the specified CSS rule.
Note: You must enclose a CSS rule inside double quotes. For a list of bootstrap glyphicons and corresponding CSS rules, see Bootstrap 3 Glyphicons cheatsheet

Help – Long description

text-align

center

Aligns the long description for help to center

Text box component after applying inline style properties

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy