Multiple columns

Each attribute in the resulting form is displayed according to the presentation information defined for the attribute – see Adding/Editing Attributes. The default top-down fashion of laying out attributes can be easily changed so that the form section contains more than one column. To do this:

  1. Click on the icon in the toolbar of the editor.
  2. A blank column will be added to the form.
  3. Click on the cell representing the attribute you want to display in a different column. Drag and drop the cell to the new column

The pictures above show an example of a multi-column form section:

Column properties

To select a column rather than an individual cell depress the SHIFT key and click on any cell that belongs to the column you want to select. Alternatively toggle “column selection” mode by clicking on the icon and then click on the column you want to select. The column is highlighted and its properties are displayed in the Selection Properties window. You can specify the following properties:

Specify percentage of the overall width occupied by the column. If you have two columns like on the picture above the default value for the width of each column is 50%, which means that each column will occupy equal share of the total width of the form section. You can make a particular column wider or narrower.

You can specify how labels of the controlled are aligned relative to the control itself. Labels can be placed on the left of the column (left aligned or right-aligned) – see the Item Type form above. Or labels can be placed above controls as in the Contact Note form below.

This setting is relevant only when labels are placed to the left of the control and defines the width of the label column. Width can be specified as an absolute value or percentage. Percentage is especially useful for forms displayed on mobile phones.

Usually width of the input control is specified in the Presentation properties of the corresponding attribute. However, you can override the value in the control by selecting “Width in percentage” or “Entire width less” radio buttons. The former is used when label width is specified in percent. In this case the control occupies the rest. If you select the “Entire width of the column less” radio button all controls of the column will occupy the entire width of the column less specified value in pixels or percent.

Note that columns can be swapped by dragging a selected column on the column that you want to swap the selected column with.

  • Last modified: 2023/01/13 04:15