Skin form: column layouts

Styles set here apply to column layout formats. Column layouts provide the ability to display main content alongside supporting content. You may choose to display main content, such as a case, in the main area and supporting content in a sidebar.

You can set responsive breakpoints for the sidebars in column layouts, enabling the layout to adjust to the available space. When the user resizes to the breakpoint dimensions that you specify, the sidebar displays below the main area of the layout.

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

Column layout style formats

There are three column layout style formats:

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

You can modify these style formats and create additional column layout formats as needed.

A preview of the currently selected format displays to the right. You can also preview formats by clicking Run Run in the toolbar and selecting one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.

Template type: displays the template associated with the selected column layout style format. When you create a new column layout style format, you can choose a template type.

Left and Right Sidebar

Sidebar width	Specify the width of the sidebar, using the measurement unit you select in the Width unit field: percentage (`%`), `em` (the current font size), or pixels (`px`).
Column spacing	Specify the amount of space between the columns in the column layout.
Width unit	Specify the unit of measurement: percentage (`%`), `em` (the current font size), or pixels (`px`)
Add responsive breakpoint to sidebar	Select this check box if you want to add a responsive breakpoint to the sidebar. When the user resizes to the dimensions that you specify, the sidebar displays below the main area of the layout.
max-width	Specify the maximum width at which the sidebar displays below the main area.
unit	Specify the unit of measurement for the max-width: pixels (`px`) or `em`.
min-width	Specify the minimum width at which the sidebar displays below the main area. Leave the min-width empty when a range is not desired.
unit	Specify the unit of measurement for the min-width: pixels (`px`) or `em`.

Creating additional column layout style formats

You can create additional column layout formats, if necessary.

To create a new style format:

Click Add a format.
Click the template type, for example, Two Column (Main-Sidebar), to select a different template type, if desired.
In the Create a new format dialog, type the Format name using only alphanumeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The style name that you enter is converted into the name CSS class/classes.
Type a Usage annotation, if desired.
Click OK. The new format is populated with default values.

If you want to create a new format that is a copy of an existing format, right-click the format that you want copy and then click Clone.

Harness, section and flow action forms — Adding a Column Layout

HTML5 Application Readiness

Open topic with navigation