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 — Components tab — Layouts — Dynamic layouts

Updated on April 5, 2022

Styles set here apply to dynamic layout formats. Dynamic layout formats determine item placement and alignment and label placement and alignment within the layout. They also define the responsive behavior of the layout. To achieve completely responsive UI, use dynamic layouts in all of the embedded sections. You can set responsive breakpoints for dynamic layouts, enabling the layout and its fields to adjust to the available space.

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

Dynamic layout style formats

A number of dynamic layout style formats are available in the skin, including: Default, Stacked, Inline, Inline grid double, and Inline grid triple.

You can modify the existing formats and create additional dynamic layout formats as needed.

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

Layout Settings

Width

Specify the width of the layout in percentage ( % ), em (the current font size), or pixels ( px ).

Maximum Width Specify the maximum width of the layout in percentage ( % ), em (the current font size), or pixels ( px ).
Minimum Width Specify the minimum width of the layout in percentage ( % ), em (the current font size), or pixels ( px ).
Item arrangement Depending upon the format you selected, the following may be available:
  • Inline — Select to display the items inline, in a single row.
  • Inline-grid (multi-column) — Select to display the items inline within in a multi-column grid.
  • Inline- grid
Columns per row Displays the number of columns in the grid.

For the Default format, you can specify the number of columns to include in each row.

Proportional column width

Displays for Inline-grid double and Inline-grid triple formats.

Select to render the column proportionally, within the specified layout Width. Clear this check box if you want to specify a width for each column, as a percentage ( % ) of the total width.

Minimum item width Specify the minimum item width in pixels ( px ) or percentage ( % ).
Minimum item height Specify the minimum item height in pixels ( px ) or percentage ( % ).
Vertical alignment Select to align the item in the top, middle, or bottom of the available row height.

Label Settings

Label position Select one of the following positions for the item label:
  • none — a label does not display
  • left — the label displays to the left of the field
  • top — the label displays above the field
Horizontal alignment

Select to align the label at the left, right, or in the center of the label area.

If you select left alignment, then the label text is horizontally aligned within the space you specify for Label width.

If you select right or center alignment, then the label text is horizontally aligned within the space allocated for each layout cell.

Label width

Appears when the Label position is set to left or label width is set to Fixed.

Select Natural label width to specify using only the space the label needs rather than a fixed width. The label must be positioned on the left to use this setting.

Specify the width of the label in pixels ( px ). Label text is horizontally aligned within the space you specify.

Item spacing

Apply margin to all sidesSelect this check box if you want to apply the same amount of space to the Top, Right, Bottom, and Left of items. Clear this check box to specify a margin for any or all of the sides of the item.
Top

Specify the amount of space above each item, in pixels ( px ), em (the current font size), or percentage ( % ). The unit of measurement that you select is applied to Right, Bottom, and Left item spacing.

RightSpecify the amount of space to the right of each item.
BottomSpecify the amount of space underneath each item.
LeftSpecify the amount of space to the left of each item.

Responsive Breakpoints

Enable support for responsive breakpoints Select this check box if you want to add a responsive breakpoint to the selected dynamic layout format.

When the screen size reaches the dimensions that you specify, the layout format changes; for example from Default to Stacked.

Breakpoint1Select the format that the dynamic layout should use when rendering at the dimensions specified for this breakpoint.
max-widthSpecify the maximum width at which the dynamic layout will display in the format you specified for this breakpoint.
unit

Specify the unit of measurement for the width of the layout: pixels ( px ) or em.

min-widthSpecify the minimum width at the dynamic layout will display in the format you specified for this breakpoint. Leave min-width empty when a range is not desired.
unit

Specify the unit of measurement for the width of the layout: pixels ( px ) or em.

Add breakpointSelect to add another responsive breakpoint.

  • Creating a custom dynamic layout format

    You can create a new custom format or copy an existing one.

  • custom button formats

    Styles set here apply to the active and inactive headers of accordion controls. You can set styles for the Standard and Sub accordion formats, as well as create custom accordion formats.

  • Dynamic layouts

    A Dynamic layout is a DIV-based layout that allows for highly flexible display of content.

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