Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Skin form: column layouts

Updated on April 5, 2022

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 spacingSpecify 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-widthSpecify 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-widthSpecify 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:

  1. Click Add a format.
  2. Click the template type, for example, Two Column (Main-Sidebar) , to select a different template type, if desired.
  3. 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.
  4. Type a Usage annotation , if desired.
  5. 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

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us