You are here: Reference > Rule types > Skins > Skin form - Layouts - Dynamic layouts

  Skin form — Components tab — Layouts — Dynamic layouts

  

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. 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 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.

Creating additional dynamic layout formats

You can create additional dynamic layout formats, if necessary.

To create a new style format:

  1. Click Add a format.
  2. 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.
  3. Type a Usage annotation, if desired.
  4. 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.

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 sides Select 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.
Right Specify the amount of space to the right of each item.
Bottom Specify the amount of space underneath each item.
Left Specify 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.
Breakpoint1 Select the format that the dynamic layout should use when rendering at the dimensions specified for this breakpoint.
max-width

Specify 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-width

Specify 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 breakpoint

Select to add another responsive breakpoint.


Definitions dynamic layout
Related topics

HTML Application Readiness

Harness and section forms — Adding a Dynamic Layout

Open topic with navigation