Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adjusting dialog container width

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Create cases more conveniently and gain more working space by adjusting the width of the underlying modal dialog box.

By default, the tertiary AJAX container that holds the case creation form adjusts its size to a certain degree, depending on the content. To increase the size further, for example, to capture a larger amount of information, you can use some of the out-of-the-box CSS helper classes. You add the helper classes by modifying the section that the AJAX container launches from a flow action at the case creation stage.
Before you begin: Identify the design template-based section that holds a case creation form. For example, you can use the Live UI tool. For more information, see Live UI tool.
  1. In Dev Studio, search for and open the section to which you want to add the helper classes.
  2. Hover over the region whose size you want to change, and then click the Edit icon.
  3. In the Region properties modal dialog box, select the Override default region settings checkbox.
  4. In the Styles field, enter the name of the helper class that you want to use:
    • modal-width-1_5x – sets the minimum width to be 960p.
    • modal-width-2x – sets the minimum width to be 1280p.
    • modal-width-max-content – sets the minimum width to be the maximum width of the content.
  5. Click Submit.
  6. On the ruleform, click Save.
  • Previous topic Supported actions and limitations in AJAX containers
  • Next topic Adding the Pulse gadget to your application

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us