Need to expand the size of the AEM dialog

[lak_priya]

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 ?

[PRATHYUSHA_VP]

Hi @lak_priya ,

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

Thanks

[EstebanBustamante]

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/com... 

 https://github.com/arunpatidar02/aemaacs-aemlab/blob/e31fc62bfd147e56ecaca740c6e2739c66c75f75/ui.app... 

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-...

Hope this helps

[ManviSharma]

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