Layout Tab

Apply HTML attributes and properties.

Note: Precedence Attributes from other component settings take precedence over the HTML Attributes configured in the Layout tab.

For some components, CSS can be configured directly in the Layout tab. If multiple attributes are added in the same 'Attribute Value' field they must be separated by semicolons (;).

For full CSS, an HTML component must be used.

HTML Element

CSS support by component (non-exhaustive)

CSS supported	CSS not supported
Text field	Date
Table lookup	Text Area
E-mail	Currency
Number
Password
Phone number
Address field

List of supported CSS properties (non-exhaustive)

CSS property	Description	Usage example
background-color	Specifies the background color of an element	Copy background-color: #BED500;
background-position	Sets the starting position of a background image	Copy background-position: 50% 10%;
background-repeat	Sets if and how a background image will be repeated	Copy background-repeat: no-repeat;
background-size	Specifies the size of a background image	Copy background-repeat: no-repeat;
border-color	Sets the background color of an element	Copy border-color: #595959;
border-radius	Defines the radius of the element's corners. This property allows adding rounded corners to elements.	Copy border-radius: 24px;
border-style	Sets the style of an element's four borders	Copy border-style: solid;
border-width	Sets the width of an element's four borders	Copy border-width: 10px;
color	Specifies the color of text	Copy color: white;
cursor	Specifies the mouse cursor to be displayed when pointing over an element	Copy cursor: pointer;
display	Specifies the type of rendering box of an element	Copy display: block;
font-size	Sets the size of a font	Copy font-size: 16px;
height	Sets the height of an element	Copy height: 20px;
margin	Sets the margins for an element	Copy margin: 4px 4px;
padding	Sets the padding for all four sides of anelement	Copy padding: 2px 2px;
position	Specifies the type of positioning method used for an element	Copy position: relative;
text-decoration	Specifies the decoration added to text	Copy text-decoration: line-through;
vertical-align	Sets the vertical alignment of an element	Copy vertical-align: center;
width	Sets the width of an element	Copy width: 100px;