Using the Layout Element to Change the Appearance of Clusters

The default appearance of a cluster is to display all the questions it contains in one column, with the questions displayed in the order in which they are defined in the script and with the label and input field or value each taking 50% percent of the available width. To change this default appearance, a layout element can be added to the cluster. For example, the following cluster has no layout element and therefore adheres to the default behavior:

Figure 1. Cluster with No Layout

<cluster>
  <title id="DetailsCluster.Title">
    <![CDATA[Personal Details]]>
  </title>
  <description id="DetailsCluster.Description">
    <![CDATA[Enter your details here]]>
  </description>
  <question id="firstName" mandatory="true">
    <label id="FirstName.Label">
      <![CDATA[First Name:]]>
    </label>
  </question>
  <question id="middleName">
    <label id="MiddleName.Label">
      <![CDATA[Middle Name:]]>
    </label>
  </question>
  <question id="lastName">
    <label id="lastName.Label">
      <![CDATA[Last Name:]]>
    </label>
  </question>
  <question id="gender" mandatory="true">
    <label id="Gender.Label">
      <![CDATA[Gender:]]>
    </label>
  </question>
  <question id="dateOfBirth" mandatory="true">
    <label id="DateOfBirth.Label">
      <![CDATA[Date Of Birth:]]>
    </label>
  </question>
</cluster>

A layout element can be added which changes the label with to be 75% as follows:

Figure 2. Layout with Label Width

<cluster>
  <layout>
    <label-width>75</label-width>
  </layout>

A layout element can also be used to change the layout type and the number of columns, as follows:

Figure 3. Layout with Compact-flow and 3 Columns

<cluster>
  <layout>
    <type>compact-flow</type>
    <num-cols>3</num-cols>
  </layout>

The default width for clusters is 100% of the available space. It is possible to alter the width of clusters using the layout element, as shown below:

Figure 4. Layout with Width for Cluster

<cluster>
  <layout>
    <width>80</width>
  </layout>