Make minor adjustments to the styling of the specific Dynamic layout

1. Click the Layout group and in the header, click the View properties icon.

2. In the Properties window, click the Presentation tab.

3. To use flexbox-based layout in your form, select theOptimize layout, markup, and CSS with new releases (recommended) check box.

   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. When this check box is selected, after every release, the markup is automatically updated to new, where possible.

4. To use float-based layout in your form, select the Use static legacy layout, markup, and CSS

   This type of layout uses the inline block when setting several layouts side-by-side inline. When this check box is selected, backward compatibility is maintained.

5. To float a dynamic layout to the far right or far left of the container in which the dynamic layout is hosted, select an option from the Float list.

   For example: If you want two dynamic layouts to display on the same line in a header bar, use the Float option.

   For more information on how to float dynamic layouts, see Using dynamic layouts to create responsive user interfaces article on the Pega Community.

6. To ensures that width settings permit the layout to float, select the Set layout width to auto check box.

   This check box is enabled by default if you set the Float option to Left or Right.

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

7. To specify custom CSS classes or inline CSS, select the Display advanced presentation options check box.

   1. To ensure that the top-level 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, select the Self-clear check box.

      Select this option for a dynamic layout that contains other dynamic layouts that are floated.

      Note: This setting applies only to IE10 and Chrome browsers.

   2. To display the layout group below other floated layout groups within the container in which it is hosted, select this Clear floated layouts check box.

   3. To define inline style for the layout, enter CSS code in the Inline style (not for production use) field.

      Entering inline style results in a guardrail warning. For maintainability and reuse, use a custom CSS class.

   4. To specify styling of the layout container, press the Down arrow key in the Container CSS class field to select a predefined class or 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 CSShelper classes.

   5. To specify styling of the content within the layout, press the Down arrow key in the Content CSS class field to select a predefined class or 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 CSShelper classes.

8. To override the spacing between items set in the dynamic layout skinselect the options for the Top, Right, Bottom and Left fields.

   • First item
   • Last item
   • All items

9. Click Submit.

• Dynamic layouts

  A Dynamic layout is a DIV-based layout that allows for highly flexible display of content.

• Configuration options for layouts

  Learn about the layout configuration options that you can use to customize your layout. For example, you can specify the format, the visibility of the layout, and the source of data for dynamic layouts.

• Creating an action set

  Define an action set to specify what a control does when a user event happens.

• Control form - Actions tab

  Action sets determine the behavior of a control.

• Available actions and conditions

  Choose an action from the list, see which options are available for the action and when you can use it. Learn which conditions you can apply.

• Skin form — Components tab — Layouts — Dynamic layouts