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

Dynamic Layout Properties — Presentation tab

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

Field

Description
Layout mode

Optimized code – Recommended option. Select optimized code to use flexbox-based layout in your form. A flexbox layout alters the width, height, and order of its contents to best fill the available space. The child layouts contained within this type of layout can be laid out in vertically or horizontally. You can expand them to fill the available space or shrink to avoid overflowing the parent layout. You can also manipulate horizontal and vertical alignment of the child layouts. If you need to build layouts in two dimensions, use nesting layouts (horizontal inside vertical or vertical inside horizontal).

Legacy code – Select legacy code to use float-based layout in your form. This type of layout uses the inline block when setting several layouts side-by-side inline. The inline block is compatible with pre-flexbox generation of dynamic layouts. Converting this layout to the optimized layout mode might require additional changes if you use custom 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.

Float dynamic layouts if you want two dynamic layouts to display on the same line, for example, in a header bar. For more information on how to float dynamic layouts, see Using dynamic layouts to create responsive user interfaces.

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
  • Self-clear – Select this option for a dynamic layout that contains other dynamic layouts to prevent the outer dynamic layout from taking up space and enabling 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 in the container in which it is hosted. For example, you can select this option when you want the dynamic layout to display as a footer.
  • Inline style (not for production use) – You can use this field to define an inline style by entering cascading style sheet (CSS) code. However, entering an inline style results in a guardrail warning. For maintainability and reuse, the recommended approach is to use a custom CSS class.
  • Custom CSS class – Instead of creating a new custom format in the skin, you can adjust elements in a layout by applying CSS helper classes. For example, you can use a CSS helper class to double the standard right margin for an element. Click the Open class editor icon to see a list of available helpers. You can enter several helper classes, separated by a space. For more information, see Helper classes. Alternatively, you can enter the name of a custom style.

 
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 has the same effect as align-left.
  • Right (flex-end): Items are packed toward the end of the line. Selecting this option has the same effect as align-right.
Spacing

These options enable you to remove the space set among items in the dynamic 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.

Related information

Open topic with navigation