Work with Styling

Styling enables you to change a selected control’s appearance. Use styling to define display-specific properties of a currently selected control in your web form.

Changing the Style of a Form’s Control

To change the styling of a control:

Select the control for which you want to change the styling. The Properties pane changes and displays the General and Styling tabs.
Select the Styling tab. You can see a number of styling options displayed for that particular control.
Select the styling property you want to apply to your control and specify the styling.
See Styling Properties.

Styling Properties

You can change a control’s appearance by defining its styling properties on the Styling tab in the Properties pane. Use the Styling tab to define display-specific properties of the currently selected control.

The following table provides an alphabetical list of the properties available on the Styling tab.

Note:

Styling properties are control-specific. Not all of the properties listed below are available for every control.

Property	Description
Automatic column size	Calculates the column size for the control based on the amount of visible controls in the row. Automatic column size is selected by default. Note: In small devices like a phone, each control is displayed in one row when automatic column size is enabled. You can specify absolute column sizes for different device sizes. To do this, deselect Automatic column size and enter a number from 1 to 12 in the four available options: Small, Medium, Large, and Extra large column sizes.
Background Color	Specifies the background color of the content area in a control.
Border (Color, Width, Style, Radius)	Determines the appearance of the border in the content area of your control. Border Color: Defines the color of the border. Border Width: Defines the width of the border. Use standard values such as 1in, 5em, or 20px. Border Style: Defines the style of the border—Solid, Dotted, or Dashed. Border Radius: Defines the value of rounded border corners. Use standard values such as 1in, 5em, or 20px.
Color	Specifies the color of the text in the content area of a control.
Control Alignment	Specifies the alignment (left, right, or center) of a control in the form.
Font Size	Defines the font size of the text in the content area of a control. The available values are x-small, small, normal, large, and x-large.
Height	Sets an absolute height for the control. Use standard values such as 1in, 5em, or 20px.
Label Color	Specifies the color of a control's label.
Label Size	Specifies the size of a control's label. The available values are x-small, small, normal, large, and x-large. Note: For a Panel control, using the Standard theme overrides the value in the Label Size property.
Reset Inline Styles to Default	Discards all styling selections made on the Styling tab and restore settings to their default values.
Text Alignment	Specifies the alignment (left, right, or center) of the content in a control. This property applies to controls where the user can type in text such as the Input Text control.
Theme	Uses a CSS to define the format of a control. This property applies to Panel and Section controls. For a Panel control: Standard: Automatically increases the size of the control’s label to 24 pixels (font size) and makes the label bold (font weight). The Standard theme overrides the value in the Label Size property. None: Applies no formatting to the control. None is the default value. For a Section control: Indent: Automatically indents the section. With the Indent theme, you can easily nest sections within sections. None: Applies no formatting to the control. None is the default value.
Width	Sets an absolute width for the control. Use standard values such as 5in, 20px, or 5%.