CSS Properties on Form Controls
- 06 Aug 2024
- 2 Minutes to read
- Print
- DarkLight
CSS Properties on Form Controls
- Updated on 06 Aug 2024
- 2 Minutes to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
The appearance of a Form control can be changed by applying pre-defined or custom CSS classes. Each Form control has various properties that the CSS stylesheet can be applied to, including border, background, font, alignment, etc.
Form Control CSS Properties
After a Form control has been added to the Form workspace, the appearance can be changed by applying the appropriate CSS class to the control under the VIEW category. Below is a list of the CSS properties that can be set on various Form controls after applying a stylesheet to the Form.
| Property | Description | ||
|---|---|---|---|
| CSS Class | Allows a user to define the CSS class to apply to the selected control | ||
| Use Form Font | Allows a user to use the default Form font style or to override the style | ||
| Label Attributes | Allows a user to define the font family, font size, and whether the text is bold, italic, or underlined | ||
| Translate Text | Check this setting to allow for text translation. | ||
| Override Background Color | Check this setting for a Background Color picker to appear in the Properties tab. This color picker allows the Designer to change the background color of the Button. | ||
| Text from Data Name | Check this setting to allow the configuration of a String Variable pulled from the data in a Flow to be used as the text name for this button | ||
| Show Underline | Displays an underline under text | ||
| Alignment | Sets the horizontal alignment of the control | ||
| Vertical Alignment | Sets the vertical alignment of the control | ||
| Watermark | Adds a watermark to the control | ||
| Translate Watermark Text | Allows the watermark text to be translated | ||
| Border width | Sets the border width on the control | ||
| Corner radius | Sets the corner radius of the control | ||
| Background type | Sets what the background of the control will be | ||
| Transparent | Removes the default colored background and sets it to be transparent | ||
| Color | Allows a user to specify a color for the control's background | ||
| Image | Allows the user to specify an image as the background | ||
| Inner Margin | Sets the inner margin of the control | ||
| Outer Margin | Sets the outer margin of the control | ||
| Tab Button CSS Class | Defines the CSS class of the Tab Container button | ||
| Tab Panel Css Class | Defines the CSS class of the Tab Container Panel | ||
| Clock Css Class | Defines the CSS of the clo | ||
| DropDown List Css Class | Define the CSS class for the dropdown list | ||
| TextBox Css Class | Define the CSS class for Textbox control | ||
| Container CSS Class | Define the CSS class for a container | ||
| Item Css Class | Define the CSS class for an item | ||
| Item Text CSS Class | Define the CSS class for the text for an item | ||
| Is Horizontal | Sets whether the control appears horizontal | ||
| Border | Sets the border on the control | ||
| Border Thickness | Sets the border thickness | ||
| Down Arrow Css Class | Define the CSS class for the down arrow | ||
| Up Arrow Css Class | Define the CSS class for the up arrow | ||
| Border color | Defines the border color for the control | ||
| Label Holder Css Class | Define the CSS class for the label holder | ||
| Image CSS Class | Define the CSS class for image control | ||
| Label CSS Class | Defines the CSS class for the label | ||
| Show Search Box | Will display a search box | ||
| Timeline Item CSS Class | Define the CSS class for the item in the timeline | ||
| FileName Css Class | Define the CSS class for the FileName | ||
| Dialog Header Class | Defines the CSS class for the header of the dialog | ||
| Dialog Body Class | Defines the CSS class for the body of the dialog | ||
| Dialog Footer Class | Defines the CSS class for the dialog footer | ||
| Size To Image | Changes the | ||
| Row Text Alignment | Sets the text alignment for the row | ||
| Cell Label Attributes | Sets the settings for the cell text | ||
| Header Label Attributes | Sets the settings for the header label | ||
| Link CSS Class | Defines the CSS class for link | ||
| ProgressBar CSS Class | Define the CSS class for the progress bar control | ||
| Header height | Sets the height of the header | ||
| Header | |||
| Border type | Define the CSS class for the progress bar control | ||
| Bottom | Adds a bottom border to the header | ||
| Full | Add a border to the header | ||
| Off | Displays the header with no border | ||
| Transparent Background | Specifies whether the background of the control is transparent | ||
Was this article helpful?
