How do I get the dropdown list to show in front of the menu?
Hi @ChongJingHong,
The issue appears to be that the z-index values of the dialog and the dropdown components in use do not work well together. We’d need to know a little more about the specific components you’re using to understand the problem and recommend a solution.
Can you copy the source code you’re using that results in this?
Additionally, it would be helpful if you could open your browser’s devtools, inspect both the modal dialog element and the open dropdown element, and copy the “computed properties” for each element here so we can see the z-index values they receive and where they came from.
Here’s an example screenshot showing the latter:
Cheers,
Daz
Ah, so it’s an AUI Dialog1 component. I see the z-index given to the dialog is 3002, where the dropdown is given 3000.
If you replaced the dialog component with the dialog2 component (
https://aui.atlassian.com/aui/latest/docs/dialog2.html), the z-index problems will solve themselves. Otherwise, there’s a bit more effort involved, as it looks like AUI has a bug when dialog1 and other layered elements are used together.
Thank you!