Start z-index for overlays

[JoniVanderheijd]

We're doing some testing on AEM 6.3 SP2, and I stumbled on an issue in one of our screens.

To edit a component we open a modal foundation form which gets opened in a coral-dialog overlay. In that modal menu we have a foundation datepicker component which opens in a coral-popover.

The issue is the datepicker appears behind the modal menu, because the coral-dialog has a z-index of 10010 and the coral-popover has a z-index of 1480.

Diving into the Coral UI 2 javascript I noticed the start z-index for overlays is 10000.

Isn't that a bit high? I thought we usually take numbers in the order of a 1000 for the overlays' z-index, and only moving components get a z-index in the order of 10000. For example the tooltips have a z-index of 1500.

Or is there something else I'm missing?

[arunpatidar · Accepted solution]

Hi,

Could you please try to use coral3 datepicker?

granite/ui/components/coral/foundation/form/datepicker

This works perfectly

Thansk

Arun

[smacdonald2008]

As Arun pointed out - try the latest granite/coral resource type or modify this value to meet your needs. There is no community content or docs for this use case to guide you.

[JoniVanderheijd]

Thanks,

This replaced the popover container with a coral3-Popover which handles his layering better. It had a z-index of 10020.

This was actually the first thing I tried, but didn't seem to work. I was probably still hitting an old version of the component.