CSS Properties on Form Controls
  • 06 Aug 2024
  • 2 Minutes to read
  • Dark
    Light

CSS Properties on Form Controls

  • Dark
    Light

Article summary

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.

PropertyDescription
CSS ClassAllows a user to define the CSS class to apply to the selected control
Use Form FontAllows a user to use the default Form font style or to override the style

Label AttributesAllows a user to define the font family, font size, and whether the text is bold, italic, or underlined
Translate TextCheck this setting to allow for text translation.
Override Background ColorCheck 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 NameCheck 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
AlignmentSets the horizontal alignment of the control
Vertical AlignmentSets the vertical alignment of the control
WatermarkAdds a watermark to the control
Translate Watermark TextAllows the watermark text to be translated
Border widthSets the border width on the control
Corner radiusSets the corner radius of the control
Background typeSets what the background of the control will be

TransparentRemoves the default colored background and sets it to be transparent

ColorAllows a user to specify a color for the control's background

ImageAllows the user to specify an image as the background
Inner MarginSets the inner margin of the control
Outer MarginSets the outer margin of the control
Tab Button CSS ClassDefines the CSS class of the Tab Container button
Tab Panel Css ClassDefines the CSS class of the Tab Container Panel
Clock Css ClassDefines the CSS of the clo
DropDown List Css ClassDefine the CSS class for the dropdown list
TextBox Css ClassDefine the CSS class for Textbox control
Container CSS ClassDefine the CSS class for a container
Item Css ClassDefine the CSS class for an item
Item Text CSS ClassDefine the CSS class for the text for an item
Is HorizontalSets whether the control appears horizontal
BorderSets the border on the control

Border ThicknessSets the border thickness
Down Arrow Css ClassDefine the CSS class for the down arrow
Up Arrow Css ClassDefine the CSS class for the up arrow
Border colorDefines the border color for the control
Label Holder Css ClassDefine the CSS class for the label holder
Image CSS ClassDefine the CSS class for image control 
Label CSS ClassDefines the CSS class for the label
Show Search BoxWill display a search box
Timeline Item CSS ClassDefine the CSS class for the item in the timeline
FileName Css ClassDefine the CSS class for the FileName
Dialog Header ClassDefines the CSS class for the header of the dialog
Dialog Body ClassDefines the CSS class for the body of the dialog
Dialog Footer ClassDefines the CSS class for the dialog footer
Size To ImageChanges the 
Row Text AlignmentSets the text alignment for the row
Cell Label AttributesSets the settings for the cell text
Header Label AttributesSets the settings for the header label
Link CSS ClassDefines the CSS class for link
ProgressBar CSS ClassDefine the CSS class for the progress bar control
Header heightSets 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


FullAdd a border to the header


OffDisplays the header with no border
Transparent BackgroundSpecifies whether the background of the control is transparent





Was this article helpful?