Layout group properties - Presentation tab

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

Layout mode

Select one of the following options:

  • Optimized code – Recommended. Select this option to use flexbox-based layouts 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 a flexbox layout can be laid out vertically or horizontally. You can expand them to fill the available space or shrink them 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 this option to use float-based layouts 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 the pre-flexbox generation of dynamic layouts. Converting this layout to the optimized layout mode might require additional changes if you use custom Cascading Style Sheet (CSS) code for styling the dynamic layout.
Display advanced presentation options

Select this check box to see the following options:

  • Clear floated layouts – Select this check box to display the layout group below other floated layout groups within the container in which it is hosted.

  • Inline style (not for production use) – Use this field to define an inline style by entering 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.