Containers
Containers are used to divide the dashboard page into sections. While components can be dropped directly onto your page (in which case they will automatically center horizontally across the page), we recommend a liberal use of nested Containers. Containers give you more options in terms of layout (e.g., spacing, alignment, or padding around each component within the container). Containers also allow for grouping of components which makes it a lot easier to copy, delete, or move blocks of content on a page. As you can drop Containers within other Containers, you can create dashboard sections with sub-sections. This might be useful if you want to have multiple charts or other components spaced equally across a page.
Data cannot be connected to Containers. Rather, drop components into your Container and follow the steps to connect that component to a data source.
In edit mode, Containers are surrounded by a dashed border. When you drop a component into a Container it will turn light green to help you position it properly. If the component is positioned outside a Container, the area will be highlighted in dark green.
Container properties
Section titled “Container properties”In the Position section of the Properties tab, you can set how you want components within the Container to be displayed.
Layout
Section titled “Layout”Select Row to present all components placed inside the Container horizontally, or Column to display them vertically. By default, Containers use Row on Desktop and Tablet, and Column on Mobile.
Layout settings can be configured independently for each viewport size (Desktop, Tablet, and Mobile), so you can have components displayed in a row on desktop but stacked in a column on mobile.
Size (px, %, em, vh, vw)
Section titled “Size (px, %, em, vh, vw)”This changes the height or width of the Container depending on the parent Container’s setting of Row or Column. The dashboard is responsive so in mobile view, the components will wrap and appear as a column.
Justify content
Section titled “Justify content”This allows you to specify the alignment of the Container’s content. Options are:
- Flex Start — contained components are packed to the start of the Container.
- Flex End — contained components are packed to the end of the Container.
- Center — contained components are packed to the center of the Container.
- Space Between — the first and last components are aligned to the Container’s edge and items are evenly spaced between.
- Space Around — space between components is kept the same while the space around the left, right, top, and bottom is distributed evenly depending on the size of the components.
- Space Evenly (Not Supported in IE) — the components have equal space between them and to the edge of the Container.
Padding
Section titled “Padding”This controls the inner space between the Container’s content and its border. Enter padding settings for top, bottom, left, and right (in %, px, em, vh, or vw). The default padding is 10px on all sides.
Border and background
Section titled “Border and background”- Border Style — set the border style. Options are None, Solid, Dotted, Dashed, Double, Groove, Inset, Outset and Ridge.
- Border Width — set the border thickness.
- Border Colour — set the color of the border.
- Border Radius — round the corners of the Container.
- Border Shadow — add a shadow effect around the Container. Choose None, or Elevation 1 to Elevation 8 for a progressively deeper shadow.
- Background Colour — set a background color for the Container.
Frequently asked questions
Section titled “Frequently asked questions”Can I nest Containers inside other Containers?
Yes — Containers can be nested to any depth. This is useful for creating complex layouts such as a row of columns, or sections with sub-sections. For example, you might place a Row Container on the page, then drop two or three Column Containers inside it to create a multi-column layout.
Can I put any component type inside a Container?
Yes — any component type can be placed inside a Container, including charts, text, info tiles, tables, Focus Words components, and other Containers.
Why can’t I connect a data source to my Container?
Containers are purely structural — they control layout and spacing but don’t display data themselves. To display data, drop a chart, table, or other data component inside the Container, then connect that component to a data source.
How do I make components appear side by side?
Set the Container’s Layout to Row. All components placed inside will be arranged horizontally. Use the size setting (Fill, or Size for a child Container) on each child component to control how much space it takes up. For example, two components each set to 50% will share the row equally.
How do I control the layout on different screen sizes?
Switch between Desktop, Tablet, and Mobile views in the Layout Bar, then adjust the Container’s Layout, Size, and Justify Content properties for each view independently. A common approach is to use Row layout on desktop and Column layout on mobile so components stack vertically on smaller screens.
What’s the difference between Space Between, Space Around, and Space Evenly?
- Space Between pushes the first and last components to the edges, with equal gaps in between.
- Space Around gives each component equal space on both sides, so the gaps at the edges are half the size of the gaps between components.
- Space Evenly distributes space so that the gaps between components and the gaps at the edges are all identical.