Inline styling of Adaptive Form components

You can define the overall appearance and style of an Adaptive Form by specifying styles using theme editor. Also, you can apply inline CSS styles to individual Adaptive Form components and preview the changes on the fly. Inline styles override styling provided in the theme.

Apply inline CSS properties

To add inline styles to a component:

  1. Open your form in the form editor, and change the mode to styling mode. To change the mode to styling mode, in the page toolbar, tap canvas-drop-down > Style.

  2. Select a component in the page, and tap the edit button edit-button. Styling properties open in the sidebar.

    You can also select components from the form hierarchy tree in the sidebar. Form hierarchy tree is available as Form Objects in the sidebar.

    In the Style mode, you can see components listed under Form Objects. However, Form Objects list in the sidebar lists components such as fields and panels. Fields and panels are generic components that can contain components such as text-box and radio-buttons.

    When you select a component from the sidebar, you see all the subcomponents listed and the properties of the selected component. You can select a specific subcomponent and style it.

  3. Click a tab in the sidebar to specify CSS properties. You can specify properties such as:

    • Dimensions & Position (Display setting, padding, height, width, margin, position, z-index, float, clear, overflow)
    • Text (Font family, weight, color, size, line height, and alignment)
    • Background (Image and gradient, background color)
    • Border (Width, style, color, radius)
    • Effects (Shadow, Opacity)
    • Advanced (Lets you write custom CSS for the component)
  4. Similarly, you can apply styles for other parts of a component such as Widget, Caption, and Help.

  5. Tap Done to confirm the changes or Cancel to discard the changes.

Example: inline styles for a field component

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

Text box component before inline styling is applied

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.

Selector

CSS property

Value

Effect

Field

border

Border width =2px

Border style=Solid

Border color=#1111

Creates a Black 2-px wide border around the field

Text box

background-color

#6495ED

Changes the background color to CornflowerBlue (#6495ED)

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

Label

Dimensions & Position > width

100px

Fixes the width as 100px for the label

Field Help Icon Text > Font Color #2ECC40 Changes the color of the help icon face.

Long description

text-align

center

Aligns the long description for help to center

Text box style after inline styling is applied

Text box component after applying inline style properties

Following the steps above, you can select and style other components, such as panels, submit buttons, and radio buttons.

NOTE

Styling properties vary based on the component you select.

Copy and paste styles

You can also copy and paste a style from one component to another component in an Adaptive Form. In the Style mode, tap the component and tap the Copy icon Copy.

Tap the other component of the same type and tap the Paste icon Copy to paste the copied style. You can also tap the Clear Style icon Copy to clear the applied style.

Set styles for different states of a component

You can set styles for different states of a component type. The different states include: Focus, Disabled, Hover, Error, Success, and Mandatory.

To define styling for a state of a component:

  1. In the Style mode, tap the component and tap the Edit icon Edit.

  2. Select the state for the component using the State drop-down list.

    Select state

  3. Define the styling for the selected state of the component and tap Save to save the properties.

You can also simulate the success and error states. Tap the Expand icon to view the Simulate Success and Simulate Error options.

Simulate states

On this page