Containers

Containers are entities that can contain child elements. Containers are often used to group related elements to make moving the group all together. Containers can also be used as a group reference to all child elements in a container when building reports or configuring search.

The container structure used to create a form can have a large impact on the maintainability of a form and reports. For more information, please read our article on How to Design a Form.

To add a Container, go to Base Types > Container and add it to the canvas.

The position of a Container will be determined by your desired layout. Often times, you will want to maintain a minimum 5 pixel offset from the parent container in the X and Y. If you have other elements or Containers above your Container, you should place them 5 pixels below the other element.

A achieve a 5 pixel separation without a calculator, align the dotted border of the container so that they touch or double up.

Then select the lower container and press the down arrow 3 times. The reason that we separate it by 3 pixels visually is that the border isn’t shown in player, which adds 2 pixels to the separation.

The size of your container should be either in appropriate columns or full-width.

If creating a full-width container, it should be 15 pixels smaller than its parent container, with an X position of 5. If you require a different X position, such as 10, subtract the extra 5 pixels from the width. This would make the new width 20 pixels shorter than then new container.

If creating columns of containers, you should maintain the same width of container down the entire column. This will make visually laying out the form easier. The horizontal space between column containers should be 5 pixels, just like the vertical space between containers. Visually positioning the containers can be done in the same way, by placing the edge of the containers together and nudging right 3 pixels using the arrow keys.

Rows in a container can mix full-width and columns.

A description attribute can be added to a container.

Descriptions added to a container will appear in the following places:

1. In the hierarchical tree in the aggregate Report Editor.

2. When used in conjunction with the searchable attribute on the container, the description will be used as the label to search across a group of checkboxes.

3. When used in conjunction with the DoNotClone attribute on the container, the description will be included in the list of elements not cloned in the Record Rollover Wizard.

Styling a container can be done using CSS in the style attribute.

For more information on styling using CSS, please read our article on CSS Styles in clevr.

Common styles used on containers include:

1. background-color : A hex code or colour name used to define the background color used to define the colour that will fill the area of the container, which appears behind any elements in the container.

2. color : A hex code or colour name used to define the color of Text / Label child elements in the container.

3. border / border-(top/bottom/right/left) : A series of 3 properties that define a border that will appear around a container. A very common use of this style is border: 1px solid black.

1. When laying out a form, you should consider creating a container to group all sections / subsections.

2. When creating your container structure, try to avoid overlapping the borders of the containers. It can be difficult to select a container later if no space is left between a container and its children.