Containers

Containers in Noloco allow you to organize and group multiple components on your pages, providing enhanced flexibility and control over your layout and visibility settings.

A container is a versatile component that can be added to both blank pages and record pages. Unlike other components, containers can nest multiple components within them, enabling better organization and layout customization.

Using Containers in Noloco

Benefits of Using Containers

• Visibility Rules: Easily set visibility rules for multiple components at once.

• Flexible Layouts: Introduce columns and more complex layouts by grouping components within a container.

• Denser Layouts: Fit more information on the screen by adding a container that lets your content fit better together

How to Use Containers

1. Add a Container: Navigate to the page where you want to add a container and select “Add Container”.

2. Add Components: Place new components inside the container or drag existing components into it.

3. Arrange and Customize: Adjust the placement and settings of the components within the container to suit your needs.

Optimizing Layouts with Containers

Containers are particularly useful for creating side-by-side layouts with charts and other components. Here's how to optimize your page layouts:

Creating Side-by-Side Layouts

To align charts and components horizontally:

1. Add a container to your blank page or record page

2. Place your chart in one column of the container

3. Add your additional component (such as text, a collection, or another chart) in an adjacent column

Adjusting Component Widths

To ensure components align properly within a container:

• Set explicit widths for each component inside the container

• For balanced layouts, configure components to each occupy 50% of the container's width

• Manually adjust widths to your desired proportions if the default alignment doesn't meet your needs

If you'd like a list displayed next to a chart, set both to occupy half the container's width. This ensures they render cleanly side-by-side without unnecessary empty space.

Maximizing Space Usage

To eliminate extra white space around charts:

• Set your chart to Full width to fill the available container space

• Ensure the parent container is also set to full width

• This allows charts and components to utilize the maximum available area

Example Use Cases

• Dashboard Customization: Group related widgets and control their visibility based on user roles.

• Form Layouts: Create multi-column forms by nesting input fields within containers.

• Chart Dashboards: Display charts alongside data lists or statistics for quick comparison and analysis.