# Container

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-62b6139f785514045632ab2f35be5bc52c39c4e3%2Fcontainer-web-control-v181-0.png?alt=media)

The Container Web Control creates a container that can be used to segment or separate elements on a Web Page. Containers can be added to Web Pages or nested within many other Web Controls such as repeaters.

## General

### Control Properties

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### Style and Layout

#### Distribute Children

This provides the ability to distribute the elements evenly in the container, based off of the selected setting.&#x20;

1. Distribution Box - Shows how children Controls are distributed by default and allows you to quickly change their position as a block within the Container.
2. Stack Horizontal - Aligns all children Web Controls horizontally.
3. Stack Vertical - Aligns all children Web Controls vertically.
4. Wrap - Specifies whether all children Web Controls should be wrapped inside the Parent or not.
5. Spacing Children - Configures how much space is taken around each child Web Control. Possible choices are to provide a Theme Variable, or an Airscript Expression. If providing an Airscript Expression, it must result in a string with a valid size.

For more information, see [Common Style Properties of Web Controls](web-controls-overview/common-style-properties-of-web-controls) or watch this Building Bytevideo about Container layout options:

\[block:embed] { "html": "\<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F9\_WQJHReY\_I%3Ffeature%3Doembed\&display\_name=YouTube\&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9\_WQJHReY\_I\&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F9\_WQJHReY\_I%2Fhqdefault.jpg\&key=7788cb384c9f4d5dbbdbeffd9fe4b92f\&type=text%2Fhtml\&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=9\_WQJHReY\_I", "title": "Container layout options", "favicon": "https://www.google.com/favicon.ico", "image": "https://i.ytimg.com/vi/9\_WQJHReY\_I/hqdefault.jpg", "provider": "https://www.youtube.com/", "href": "https://www.youtube.com/watch?v=9\_WQJHReY\_I", "typeOfEmbed": "youtube" } \[/block]

## Actions

#### Clicked

This event is run each time the container is clicked.

## Advanced

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the container will be visible. If `FALSE` the container will not be displayed. If the field is empty, the container will be visible.

## Example

The app builder may want to only display a set of elements if an app user has completed a previous field. Change the **Is Visible** property of the Container to evaluate to `ISNOTEMPTY`

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-7eebea1872cbb2b5f6b661051eb91ccfc40bc22f%2Fcontainer-web-control-v181-1.png?alt=media)
