Handling spacing in sections created using design templates

From PegaWiki
Handling spacing issues in sections created using design templates / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Handling spacing in sections created using design templates

Description Limiting unnecessary empty space in sections that are based on design templates
Version as of 8.X
Application Platform
Capability/Industry Area User Interface



One of the best practices for building UI in Pega Infinity™ is to use sections based on design templates as much as possible. The benefits include improved responsiveness and the ability to edit the section in App Studio. But when embedded sections are involved, the resulting interface may include a lot of empty space. This article describes how the extra space can be removed to get a pixel-perfect UI.

For information about handling spacing issues in sections that are not based on design templates, see: https://academy.pega.com/challenge/fixing-spacing-issues-and-using-helper-classes/v1/in/16481

Process/Steps to achieve objective[edit]

The following section represents the desired outcome with no unnecessary spacing:

Example of a section with no superfluous spaces after the embedded section
Sample section with correct spacing

In this example, the fields up to Marital status form a separate section that is embedded into the main section. The fields from Dependents onward form another embedded section. The following section illustrates the default settings:

Example of a section with superfluous spaces after the embedded section
Sample section with extra spacing

The extra spaces between the Marital status and Dependents segments are caused by the extra margin that is added from the embedded section as well as the Marital status radio button control. In order to remove this spacing, you need to open the settings of that control. Click the Presentation tab, and then expand the Advanced Presentation Options section. In the Cell read-write classes and Cell read-only classes fields, enter margin-b-0 as in the following example:

Settings to remove extra margins from the Marital status radio button
Margin configuration for the radio button

Next, from within the main section, open the settings of the embedded section. Click the Presentation tab, and then select the Display advanced presentation options checkbox. In the Cell read-write classes and Cell read-only classes fields, enter margin-b-0 as in the following example:

Settings to remove extra margins from the embedded section
Margin configuration for the embedded section

Results[edit]

By adding a custom margin style to the control and the embedded section you remove unwanted spacing in your UI.