Container Control

About containers

Containers are used to group and layout other controls on a web app page; they can be configured with one or more columns (cells).

There are a set of Appearance properties for the container, and separate Appearance properties for each column.

Importantly:

  • In the container Appearance > Columns properties you set the number of columns and the column widths.
  • In a column's Appearance properties you set the alignment, margin and padding values that define the position of a control when you add it to a container column.

You add a control to a container column by dragging and dropping a control from the Controls toolbox into a column.

Note | A container remains hidden if its columns have no controls inside them.

This tutorial explains the use of containers to position controls on a web app page.

See also Populating a Container with JavaScript.

Selecting a container

To select a container, for example to examine its properties, click the container border, which is a solid line—

The red delete button may be used to delete the container. If there are controls in the columns, they also show a red delete button, so that you can delete an individual control from a column or delete the complete container including all controls—

With the container selected, the Properties list displays the container properties.

Selecting container columns

Selecting an empty column

To select an empty container column, click its border, which is a dotted line, or click anywhere inside the column.

With the column selected, the Properties list displays the column properties.

Selecting an occupied column

When a column is hosting a control, it can be difficult to select the column rather than the control itself; the column border and control border are close to each other. You can make the selection much easier by adding a small amount of padding (for example, 5px) to the column Appearance > Padding properties. Do this for all columns in the container. The padding creates some space between the column border and the control border that you can click in to select the column. This example has been exaggerated for clarity—