Need to expand the size of the AEM dialog | Community
Skip to main content
L
lak_priya
October 27, 2025
Question

Need to expand the size of the AEM dialog

  • October 27, 2025
  • 3 replies
  • 290 views

I need to increase the size of the AEM dialog. Even on full screen mode the fields are still small. I have used some nested multifields that make the fields look very long and small. Is there a way I can change the size of the AEM dialog on load for the required component ?

 

Also, I was trying to change the default CSS of dialog. Is it the right was ?

3 replies

PRATHYUSHA_VP
Community Advisor
PRATHYUSHA_VPCommunity Advisor
Community Advisor
October 27, 2025

Hi @lak_priya ,

 

You can increase the width of AEM dialog using 'width' property. Refer below - 

 

 

Thanks

 

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
October 27, 2025

Hi,

 

You can customize your dialog using CSS. There are several ways to achieve this, but one straightforward approach is to create a new client library and include your CSS files there. Then, add this clientlib to your dialog using the extraClientlibs Property [1] — this will make your custom styles available.

This method allows you to control where the styles are applied, ensuring they only affect dialogs where the clientlib is loaded.

If you need even more granular control, you can also add custom classes to your dialog using the granite:class property[2]. This lets you target specific elements within the dialog with precision.

 

[1].

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/developing-components#customizing-dialog-fields 

 https://github.com/arunpatidar02/aemaacs-aemlab/blob/e31fc62bfd147e56ecaca740c6e2739c66c75f75/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/components/multifield-json/_cq_dialog/.content.xml#L6 

https://medium.com/activate-aem/loading-custom-js-in-an-aem-dialog-6b31e9a36743 

 

[2]. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/granite-class-and-granite-data-for-select/m-p/226126/highlight/true#M65922

 

 

Hope this helps

Esteban Bustamante
    ManviSharma
    Adobe Employee
    ManviSharmaAdobe Employee
    Adobe Employee
    October 27, 2025

    Hi,

    Yes, you can increase the AEM dialog size — but the right way is not to change the default AEM CSS. Instead, give your dialog a custom class and use a small clientlib to style only that dialog.

    Here’s how:

    1. In your component dialog (/apps/.../cq:dialog), add:

       
      granite:class = my-dialog

    2. Create a clientlib under /apps/your-site/clientlibs/dialog with category cq.authoring.dialog.
      Add a CSS file (e.g. dialog.css) containing:

       
      .my-dialog .coral-Dialog { width: 90vw; max-width: 1100px; } .my-dialog .coral-Dialog-content { max-height: calc(100vh - 150px); overflow: auto; }

    3. Build and deploy , the dialog will now open wider and be scrollable even with nested multifields.

    This approach affects only your component dialog.

     

    Hope this helps.

    Regards,
    Manvi Sharma

     
     
    Terms & ConditionsAccessibility statement

    Loading footer...