Harness and section forms — Adding a Column Layout

There are three types of column layouts:

• Two Column (Sidebar-Main)
• Two Column (Main-Sidebar)
• Three Column (Sidebar-Main-Sidebar)

Column layouts separate content from presentation. You can add a Column layout to a section and then add content, such as properties, controls, and other sections, to the column layout. At run time the controls added to the main area of the column layout receive focus before the controls in the sidebar regions when the user tabs through the controls.

In the skin, you can specify the presentation using column layout formats. Changing the column layout format in the skin automatically affects all sections using that format. See Skin form — Components tab — Layouts — Column layouts.

Dynamic columns work well where you have primary and related supporting content - for example, a product description in the main window and price and sizing details in the sidebar. Column layouts are designed so that the main area stretches to take up available space, whereas the sidebars are a fixed width you set. Column layouts are responsive for different display devices, so that the sidebars can shift below the main area if you set a "responsive breakpoint".

Column layouts also have responsive behaviors.

Apply or modify the desired format for a Column layout in the Column layout properties panel.

Column layouts are available only to user interfaces rendered in HTML5 document type (standards mode).

> Adding a Column layout

1. In the harness or section, click the Layout control group and select the Layout control.
2. On the Set layout type dialog, select Column layout , and then select the desired column layout format, for example, Two Column (Sidebar-Main).
3. Click OK. The Column layout displays.
4. Drag a property, section, UI element, or dynamic layout into each of the columns.
5. Click the Gear icon in the Column layout header to open the Column layout properties panel. Complete the following:
   • General tab
   • Presentation tab