You are here: Reference > Rule types > Skin rules > 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. 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.

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.

Creating additional dynamic layout formats

You can create additional dynamic layout formats, if necessary.

To create a style format:

Click Add a format.
In the Create a new format dialog box, enter the Format name by using only alphanumeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The format name that you enter is converted into the name CSS class or classes.
Optional: Provide a Usage annotation.
Click OK. The new format is populated with default values.

To create a style format by copying an existing format, click Actions and select Save as from the list.

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.

Open topic with navigation