AEM cloud select field dropdown issue

Question

In my AEM Cloud component, I have a dropdown select field. When I click on the field, the dropdown values appear slightly to the right and extend beyond the field's width. I'm facing this issue with all dropdowns across my project.

PavanGaddam · Accepted Answer

I think something from your custom client library is causing that issue. Check if you are using any OOTB CSS class in your custom CSS. You may try the elimination method to find the right component CSS that is causing this issue. Try removing one component at a time in your project and verify and see at what point this gets fixed.

Karishma_begumSh · Answer

Hi @manchala1

1. Check for Global CSS Overrides

Search your global/project stylesheets for overrides on dropdown-related classes.

Example (bad practice):

select {
  margin: 5px;
  width: 150px;
}

Avoid overriding Coral UI core classes directly.

2. Ensure Proper Dialog Container Styling

Parent containers should not have restrictive styles that interfere with Coral dropdown rendering.

Fix example:

.coral3-Select-popover {
  left: 0 !important;
  width: auto !important;
  min-width: 100% !important;
}

3. Force Correct Width (Quick Fix)

Add scoped styles to align dropdown widths consistently:

.coral3-Select {
  width: 100% !important;
}
.coral3-SelectList {
  min-width: 100% !important;
}

4. Validate in Clean AEM Instance

Deploy the same dialog on a clean AEM SDK instance without custom code.
If the dropdown appears correctly, the issue originates from project-specific CSS or dialog structure.

5. Use Coral UI JavaScript Hook (Optional)

Ensure dropdowns are initialized properly if added dynamically or affected by JS timing:

Coral.commons.ready(function() {
  Coral.commons.triggerComponentUpgrade(document.querySelectorAll('.coral-Select'));
});

Regards,

Karishma.

1. Check for Global CSS Overrides

2. Ensure Proper Dialog Container Styling

3. Force Correct Width (Quick Fix)

4. Validate in Clean AEM Instance

5. Use Coral UI JavaScript Hook (Optional)

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded