Container Properties

Container Properties property group is related to the set of HTML wrappers around a component, and those properties are mostly responsible for where the component is located on the layout and how much space it takes. The exact set of available properties varies depending on which Container Layout type the component is placed in.

Container Style property is always present and allows you to directly apply custom CSS to the outermost component wrapper.

To get more details on the Container use and structure, read the Container Part of a Component article.

Changing Container Style

Use the Container Style property if you need to:

  • Apply CSS that targets the area around a component within its defined position on the underlying layout.

  • Address a component’s elements that you cannot reach from the Element Style property group.

To add a custom style to the property:

  1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Container Properties tab.

  1. In the Container Properties tab, add the CSS styles to the Container Style property:

background-color: mintcream;
padding: 40px 80px;

  1. The style is applied once the field is out of focus, and the result is visible on the dashboard.

To take a deep dive into using CSS in component properties, visit the Applying CSS to Components section.

Was this page helpful?