Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Start z-index for overlays

JoniVanderheijd
Level 2
Level 2

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?

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

Hi,

Could you please try to use coral3 datepicker?

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

This works perfectly

Thansk

Arun

View solution in original post

3 Replies
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

Hi,

Could you please try to use coral3 datepicker?

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

This works perfectly

Thansk

Arun

View solution in original post

smacdonald2008
Level 10
Level 10

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
Level 2
Level 2

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.