# Container

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-62b6139f785514045632ab2f35be5bc52c39c4e3%2Fcontainer-web-control-v184-0.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

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.

## Properties

### Accessibility

#### Role

Roles provide a semantic association to a Container, allowing assistive technologies to interact with that Container according to users' expectations. The roles available for a Container are: `banner`, `complementary`, `contentinfo`, `form`, `main`, `navigation`, `region`, `search`, `article`, `cell`, `columnheader`, `definition`, `document`, `feed`, `figure`, `group`, `heading`, `img`, `list`, `listitem`, `math`, `none`, `note`, `presentation`, `row`, `rowgroup`, `rowheader`, `separator`, `table`, `term`, `toolbar`, `tooltip`, `tree`, `treegrid`, `video`, `application`, `alert`, `alertdialog`, `button`, `checkbox`, `dialog`, `gridcell`, `link`, `log`, `marquee`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `progressbar`, `radio`, `scrollbar`, `searchbox`, `slider`, `spinbutton`, `status`, `switch`, `tab`, `tabpanel`, `textbox`, `timer`.

#### ARIA Label

Expects type `text`.

Assigns a string value to a Container using an accessible name, for cases where the default denomination in the user interface is missing, or does not accurately describe its contents. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

#### ARIA Live

Designates a dynamic Container to be recognized by assistive technologies. A dynamic Container is an element that do not require the whole Web Page to reload in order to change. Users may choose one the following ARIA Live properties:

* **off:** ARIA Live attribute is disabled.
* **Polite:** assistive technologies will notify users of updates when they are idle, without interrupting their current task.
* **Assertive:** any updates made to the Container are notified immediately.

#### ARIA Atomic

Expects type `boolean`.

The ARIA Atomic attribute allows you to define if assistive technologies will recognize changes to the selected Container. If `TRUE` is selected, any dynamic change in the Container will be notified to the user. This property is `FALSE` by default.

#### ARIA Relevant

This attribute establishes if the Container will trigger notifications by assistive technologies when they are modified. Users may choose one of the following ARIA Relevant properties:

* **additions**: when text or content is added to the designated Container.
* **removals**: when text or content is deleted from the designated Container.
* **text**: when text is added inside the designated Container.
* **all**: All of the abovementioned actions: `additions`, `removals` and `text`.

### 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.

#### Is Disabled

Expects type `boolean`.

If `TRUE`, the Container will be disabled and the user will not be able to interact with the Control. If `FALSE`, it will be enabled. If the field is empty, it will be enabled.

## Style

#### 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](../styling/styling-overview/web-control-styling-properties) 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": "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.

## 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://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-edd97f992caf5b9a54eeebf482b0c09410c89c8a%2Fcontainer-web-control-v184-1.png?alt=media)
