You are here: User interface > User interface rules > Harness and section forms > Dynamic Layout Properties - Presentation tab

Dynamic Layout Properties — Presentation tab

Click the in the dynamic layout header to display the Dynamic layout properties panel, and then select the Presentation tab.

Field

Description

Max height Set a maximum height (in pixels) for a repeating dynamic layout.

Layout mode

Flexbox

The flexbox (flexible box) alters the width, height, and order of its contents to best fill the available space. The child layouts contained within the flexbox can be laid out in vertically or horizontally and will expand to fill the available space or shrink to avoid overflowing the parent.

Both horizontal and vertical alignment of the child layouts can be manipulated. Nesting layouts (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Selecting the flexbox is recommended.

Inline-block

Use the inline block when setting several layouts side-by-side inline. The inline block is compatible with pre-flexbox generation of dynamic layouts. Converting an inline-block dynamic layout to a flexbox later may require addition changes if you use additional CSS for styling the dynamic layout.

Float

The float option enables a dynamic layout to float to the far right or far left of the container in which the dynamic layout is hosted.

You may want to float dynamic layouts if you want two dynamic layouts to display on the same line, for example, in a header bar. To do this, create a dynamic layout. Nest two dynamic layouts within it, floating one dynamic layout on the left and floating the other dynamic layout on the right. See the PDN for configuration details.

Select a Float option: None, Left, Right

If you select to float the dynamic layout, you can:

Set layout width to auto

Ensures that width settings permit the layout to float. This check box is enabled by default if you select to float the dynamic layout.

Clear this check box only if the Layout width for the specified dynamic layout format in the skin is less than 100%.

Display advanced presentation options

Select if you want to display the following advanced options:

Self-clear	Select this option for a dynamic layout that contains other dynamic layouts that are floated. This ensures that the outer dynamic layout does not take up space and enables the nested dynamic layouts to use styling, such as background color, set by the outer dynamic layout. This setting applies only to IE10 and Chrome browsers.
Clear floated layouts	Select this check box when you want the dynamic layout to display below other floated dynamic layouts within the container in which it is hosted. For example, you may select this option when you want the dynamic layout to display as a footer.
As a best practice, define custom styles in the skin.
Inline style	Type CSS code to define an inline style.
Custom CSS class	Specify a custom CSS class, if desired styling cannot be achieved through the skin.

Alignment

When the parent layout mode is flexbox, the alignment sets the align-items CSS attribute. You have the following alignment options:

Auto: Items are packed toward the start of the line. Selecting this option will has the same effect as align-left.
Right (flex-end): Items are packed toward the end of the line. Selecting this option will has the same effect as align-right.

Spacing

These options enable you to remove the space set among items in thedynamic layout format in the skin.

The default is None, indicating no override — spacing settings are determined by the skin.

You may want to override the spacing set in the skin in certain cases. For example, you might want remove spacing from the first item in your dynamic layout, in order to have it display directly below the header, while retaining the 20 pixel spacing among the other items in the dynamic layout, as set in the skin. To do this, remove Top spacing for the First item.

Top	Select to remove spacing for the `First item` or `All items`.
Left	Select to remove spacing for the `First item` or `All items`.
Right	Select to remove spacing for the `Last item` or `All items`.
Bottom	Select to remove spacing for the `Last item` or `All items`.

dynamic layout

Harness and Section forms - Adding a dynamic layout
Dynamic layout - General tab
Actions tab
Skin form — Components tab — Layouts — Dynamic Layouts

Open topic with navigation