Discussion

80
Views
Balasubramanian Durai (durab)
PEGA
Principal Software Engineer
Pegasystems Inc.
IN
durab Member since 2016 9 posts
PEGA
Posted: March 9, 2021
Last activity: March 10, 2021
Posted: 9 Mar 2021 23:59 EST
Last activity: 10 Mar 2021 6:25 EST

How to set width for dialog containers in Theme Cosmos

In theme cosmos, create stage and flow actions are launched in the tertiary ajax container that looks like a modal dialog container and it is not a pega modal. OOTB, the default behavior of the container will maximize their space based on content inside the container.

In special cases, some applications might want the dialog container to be bigger based on the use case. Theme cosmos provides, ootb three helper classes to make the dialog container for adjusting the width.

  • modal-width-1_5x – sets the minimum width to be 960px
  • modal-width-2x – sets the minimum width to be 1280px
  • modal-width-max-content – sets the minimum width to be the maximum width of the contents

Before Change:

Before modal dialog changes

After changes:

After modal dialog changes

To increase the width of the container, the helper classes needs to be added on the dynamic layout of the section that is being called in the flow action.

Here are the steps to achieve the width of the dialog container

Use case 1: Section called in flow action is configured as a design template

If the section being called in the flow action, section is using a design template - 1 column,  1 column with 100%, 2,3 & 4 column inline wrapping.

Steps to add the helper class:

  1. Navigate to the section
  2. Click on the pen icon the region that will launch the property panel
  3. Check the “Override default region settings” checkbox
  4. Add the helper class in the styles

 

Add modal dialog helper class in a design template section

 

Use case 2: Section called in flow action is not configured as a design template

If the section being called in the flow action, section is not configured as a design template,

Steps to add the helper class:

  1. Navigate to the section
  2. If there is single section include configured, click on the settings icon and add the helper class in the presentation tab.
  3. If there are multiple components in the section, add a wrapper dynamic layout and move all the components inside the dl
  4. Click on the settings icon and navigate to presentation tab
  5. Add the helper class in the content css class
  6. Also remove all the spaces from the dl

Add modal dialog helper class in a non design template section

 

Use case 3: Use modal-width-max-content in the following scenarios

“modal-width-max-content” helper class will set the minimum width of the section to max width and set this helper class on the parent DL, when the child dl uses helper classes like  “flex-col-70-30”, “flex-col-30-70”, “flex-col-80-20” etc.

 

***Edited by Moderator: Pooja Gadige to add Developer Knowledge Share tag***
Pega Platform 8.6 Low-Code App Development App Studio Financial Services Front-End Developer Developer Knowledge Share