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 HTML 5 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 the Run icon 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.
- column layout
A Columns layout provides the ability to display main content, such as a work item, alongside supporting content, such as an attachment.
- HTML5 Application Readiness landing page
Previous topic Skin form — Components tab — Layouts — Containers Next topic Skin form — Components tab — Layouts — Dynamic layouts