Dynamic layouts and containers

Dynamic layouts use flexbox to arrange different elements. In the flex layout model, the children of a flex container can be laid out in any direction and can flex their size. For example, the field can grow to fill the unused space in the parent container or shrink to avoid overflowing the parent container. 

You control the behavior and style of the dynamic layout and the container separately. For example, in the following image, the Default dynamic layout format is included inside the Sidebar gadget container format.

The format of the dynamic layout controls how the elements are arranged in columns or rows. The following formats are recommended depending on the required direction.

In the following image, click the + icons to learn more about each layout.

The two container formats typically used are:

• None – The default configuration; the container is not wrapping the dynamic layout
• Default – The dynamic layout is wrapped inside a card that usually has a white background and margin around the outline

You can use other formats to display notifications and banners.

A container wraps the dynamic layout inside a card layout as content and supports header and other advanced behavior.

In the following image, click the + icons to learn more about each setting of the container header.

In Pega Platform™ 7.2 and later, all dynamic layouts use flexbox by default to reduce the markup and CSS needed to render these layouts. Older layouts must be manually upgraded to use the flexbox layout.

Dynamic layouts can be nested within each other to achieve the required design. However, always optimize the number of dynamic layouts to reduce the DOM size and improve the rendering of the UI.

In general, the nested dynamic layout is not required when wrapping a single item inside the layout and should be removed.

For inline grid double and inline grid triple, nest a default layout to ensure that the tab order follows the visual order of the columns. Test that keyboard-driven users can tab through the screen in the same way as the visual layout suggests. 

Avoid nesting layouts unnecessarily. Layouts carry styles, such as padding and margins, that may impact alignment and spacing on the generated UI.

Additional nesting guidelines: 

• Incorporate nesting to control the UI for the end user’s benefit
• Do not nest simply so that it is easier to view for you as a developer
• Do not use empty dynamic layouts to create empty space or for rendering a header

Spacing originates from both the dynamic layout and the container components. It is critical that you define how the spacing is calculated and know the spacing margin settings for all sides. Failure to correctly configure the spacing for the container components leads to misalignment and double-spacing issues.

The dynamic layout format provides the following spacing settings:

• Margin between items within a layout through item spacing
  
• Minimum height of an item
  

The container format provides the following settings:

• Padding on content
• Margin on box
• Left-padding on container header
  

Consistent spacing throughout an application is critical. The UI-Kit design system is on a 7px grid system and the spacing between items is usually 14px.

Using the right container format and dynamic layout is critical when implementing a design so that spacing is consistent.

 It is possible to modify the spacing between items for a given instance of the dynamic layout by configuring the spacing under the presentation tab of the dynamic layout.

• None (spacing is preserved) 
• First/Last item 
• All items 
  

In the following example, you need to make sure that the buttons are left-aligned to the content of the header and the form.

Because the goal is to align the submit buttons to the right, it is typical to nest the dynamic layout inside a top-level dynamic layout and set the flex mode to right-aligned.

By default, dropping new dynamic layouts from the palette creates a double spacing issue of 14px to the right of the submit button.

Another typical issue with double-spacing is double padding when nesting a layout. In the example below, a stacked layout contains a section include that also contains a stacked layout.

By default, the stacked layout inserts padding at the bottom of each item inside the layout. This leads to unnecessary spacing, as seen at the bottom of the form.

To fix the issue, it is necessary to remove the bottom spacing for the two layouts.