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 |
Optimize layout, markup, and CSS with new releases –
Recommended option. Select optimize layout 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). Select this check box to allow automatic updates to new markup,
where possible, for every release. 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. Select this check box to maintain backward compatibility. |
||||
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:
|
||||
Alignment | When the parent layout mode is flexbox, the alignment sets the align-items CSS
attribute. You have the following alignment options:
|
||||
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 Top - Select to remove
spacing for the
Left - Select to remove spacing for the Right - Select to remove spacing for the Last item or All items . |