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:

After 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

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

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.