Target audience: Site Administrators, Site Managers, Site Editors
A webform Layout Box in the Web Management System (WMS) allows components to be grouped and displayed horizontally or vertically.
In this article:
A relatively simple component with limited settings, Layout boxes can be used in combination with other fields to create more readable forms. With some configuration, it can work with most webform components.
Below are some basic steps to display fields in a single row:
The two textfields will now be displayed side by side.
When a Layout box is added for the first time:
Layout boxes have limited settings. When the Edit link is clicked, only three configurable options will appear.
This article will focus on Alignment which provides three options:
There are two kinds of horizontal alignment available:
Horizontal is the default, while Equal width enables fields to be displayed in columns with the same width.
Note: Equal width alignment currently only works with Fieldset components.
To see how the Vertical alignment option works, refer to the Application Form in How to use the Layout Box component:
Vertical and horizontally-aligned Layout boxes can be combined to display fields in a grid-like layout.
To see how fields can be displayed in a grid:
In cases where:
a vertically-aligned Layout box can be substituted with a Fieldset.
Here is the same form but with layout_box_1 and layout_box_2 replaced by fieldsets labelled Customer 1 and Customer 2
In the Form components, container_a (which has a horizontal alignment) is parent to both Fieldsets:
When deleting Layout boxes or Fieldsets with nested fields, it is necessary to first un-nest any component that should not be deleted.
The easiest way to do this is by moving the component to the top and clicking Save. Unless the new configuration is saved, all nested fields will be deleted along with the parent.
The following are some measures to consider when displaying multiple fields in a single line.
When using the Layout Box, first consider how much space is available. That space would be limited by the presence of other elements, such as Vertical Menus and Sidebars.
It is possible to display multiple components in a single row by modifying the width of various components. This can be done by:
Specifying the Width under DISPLAY settings
Changing how the component is displayed
When working with components that affect the display of forms, it is recommended to verify how the form will look like on mobile devices. Apart from previewing the form on popular phones, browser tools such as Chrome Web Developer can be used to emulate mobile devices.