Harness and section forms — Adding a Column Layout
Harness and section forms — Adding a Column Layout |
|
Based on dynamic layout technology, column layouts provide the ability to display main content, such as a work item, alongside supporting content, such as an attachment.
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. It is important to note, at runtime 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).
and select 
. 
in the Column layout header to open the Column layout properties panel. Complete the following:
Related information