Creating a layout using Containers

A Container is a built-in view component available in the View designer. Containers are used to define the layout for a region of a view that can include view components or nested container.

To add a container to a view definition

1. In the View designer, in the Palette pane, from the Basic components, drag and drop the container to the canvas.

2. In the Properties pane, provide the properties for the container component. The following properties are available:

   Property	Description
   Number of columns	Divides the container area into different columns. Select the number of columns in which you want to divide the container, up to a maximum of six columns. You can change the span size of the column. By default, the columns are divided in symmetric order depending on the number of columns you select. For example, if there are 3 columns, the column span is 4 for each column. Containers are based on 12-column grid system and the sum of column spans within one container always equals 12. Minimum span for column is 1, and the maximum span for columns is 12. To change the column span, on the column span field, reduce or expand the column span using auto expand available on the field, as shown in the following image:
   Row wrap	To control the layout of multi-column containers based on the width of the view, select Row wrap. The default value is Small.  If you add a container to an existing container, it automatically inherits the Row wrap property from the parent container. If you change the Row wrap value of the parent container, you are prompted whether to set all child containers to match its value.
   Hidden	Hides the container in the view definition. You can also specify the condition when you want to hide the container.
   CSS classes	Defines the margin and border for the container. The available options are no margin, 1 pixel border, and white background.

3. Add the view components in the container as per the requirements.
4. Click Save.
   

Related topics

Defining-the-user-interface-through-view-definitions

Creating-or-modifying-view-definitions

Creating-a-responsive-web-layout

Creating-a-view-for-a-record-instance-by-using-record-editor

Creating-a-tabular-view-of-record-instances-by-using-a-record-grid

Creating-a-custom-service-in-Java