# Container

The main purpose of the `Container` component is to act as separate host for other child components. It groups a set of components together in a dedicated frame, arranged on a separate grid from the main application canvas. A `Container` can be made scrollable to create a scroll container to place larger content than the available space.

When the dimensions of a `Container` on the canvas are adjusted, its content resizes dynamically.

<figure><img src="https://1582137130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTYtq8XZyg79paoHbd93%2Fuploads%2FljeM7czDpe1SjYSbrdEJ%2FScreen%20Cast%202022-10-18%20at%2012.58.41%20PM.gif?alt=media&#x26;token=ca7edf5f-95ed-4c38-bd64-198124323c12" alt=""><figcaption><p>Container content resizes dynamically</p></figcaption></figure>

Use this component to create separate areas in your app for specific component groups. The styling options allows these blocks to stand out visually compared to the rest of the application.

### Properties

The `Container` component offers the following configuration properties.

<table><thead><tr><th width="158">Property</th><th width="159">Type</th><th width="161">Default value</th><th>Behavior</th></tr></thead><tbody><tr><td>Header text</td><td><code>stringWithJs</code></td><td><code>'Header'</code></td><td>When the "Show Header" property is set to <code>true</code>, the text of this property is displayed in the header of the container. This configuration is not accessible in the properties panel otherwise.</td></tr><tr><td>Scrollable</td><td><code>boolean</code></td><td><code>true</code></td><td>Determines whether the container should allow scrolling in case its content is larger than the container itself. If disabled, overflowing content is hidden and not accessible to the end user.</td></tr><tr><td>Show Header</td><td><code>boolean</code></td><td><code>false</code></td><td>When set to <code>true</code>, the container renders a text header, which can be modified in the "Header text" configuration.</td></tr></tbody></table>

### Scrollable containers

A container with "Scrollable" set to `false` is still scrollable in the app editor, but highlights overflowing content with a red background.

<figure><img src="https://1582137130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTYtq8XZyg79paoHbd93%2Fuploads%2FjuW8sMUzldNMFGM0FE7e%2FScreen%20Cast%202022-10-18%20at%203.59.28%20PM.gif?alt=media&#x26;token=0667f620-ee08-41f8-8e4f-8c17f53eb993" alt=""><figcaption><p>Warning the user about potentially inaccessible container content</p></figcaption></figure>

The purpose of this is to still allow the app editor to freely modify the container content, while  aware that some content will be inaccessible for the app user. The production version does not  scroll for such a container, and cuts off overflowing content.

### Events

The `Container` does not offer any events.

### API

The `Container` exposes the following API in the JavaScript runtime environment.

<table><thead><tr><th width="271">Property / Function</th><th width="210">Type</th><th>Behavior</th></tr></thead><tbody><tr><td><code>headerText</code></td><td><code>string</code></td><td>Current string value of the "Header text" configuration.</td></tr><tr><td><code>setHeaderText(value)</code></td><td><code>(value: string) => void</code></td><td>Sets the header text to the provided string value.</td></tr><tr><td><code>setShowHeader(value)</code></td><td><code>(value: boolean) => void</code></td><td>Adjusts the flag whether the header text should be displayed to the provided boolean value.</td></tr><tr><td><code>showHeader</code></td><td><code>boolean</code></td><td>Current boolean value of the "Show header" configuration.</td></tr></tbody></table>