There are a number of sub-control types available for use as a container:

Absolute Layout Container

Container for explicitly positioning controls.

Alignment Container

The Alignment container can be used to left, center, or right align groups of controls.

ButtonGroup Container

Used to group multiple buttons together such that they appear as a single control

Card, CardNavigator, CardHeader and CardFooter Containers

Create animated transitions between screens using Card containers.

ControlGroup Container

Controls in a ControlGroup container are rendered using a mobile style.

CSSGrid Container

Allows you to position controls in a grid of rows and columns to easily define complex, responsive layouts.

Editor Container

Used to create Editor Sets for the FormView Control.

EditorSet Container

Used to contain one or more Editors.

FlexLayout Container

Used to define the width of controls on a single line.

Injectible Content

Contains controls and other elements that can be "injected" into other locations in a UX Component, such as a DIV or List Footer.

NoFloat Container

Controls in this container are not wrapped in a div when rendered.

PanelFooter Container

Defines a footer for a Panel.

PanelHeader Container

Defines a header for Panel.

PanelOverlay Container

Creates a Panel shown on demand that renders in fixed location.

RepeatingSection Container

Used to create a repeating section.

SpinListGroup Container

Groups Spin List controls together, creating a single, complex 'spin list'.

Window Container

Places controls in a Window container

To learn more about the different container types, watch the video below:


Responsive Design - Dynamically Resizing Controls on Orientation or Window Size Change - Understanding the FlexLayout Container

A common requirement when designing a UX component is to have a control dynamically resize when the orientation of a mobile device changes or when the window size (in a desktop browser) changes. This is easily accomplished using the FlexLayout container on a UX.

Any of the controls in a FlexLayout container can have their width specified as a 'relative' size (relative to the size of the other controls in the FlexLayout container). This video shows how to use the FlexLayout container type.

Using Card and CardNavigator Containers to Create Animated Transitions

A common UI pattern in web applications is to create animated transitions between different content areas.

In this video, we show how the CardNavigator container can be used to create flip and slide transitions between different content that has been wrapped in Card containers.

Download Component


Creating Complex Responsive Layouts using the CSSGrid Container

The CSS grid specification allows you to create complex responsive layouts. In this video we show how you can use a CCSGrid container type to create a complex, responsive layout.

Download Component