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?
Solved! Go to Solution.
Views
Replies
Total Likes
Hi,
Could you please try to use coral3 datepicker?
granite/ui/components/coral/foundation/form/datepicker
This works perfectly
Thansk
Arun
Views
Replies
Total Likes
Hi,
Could you please try to use coral3 datepicker?
granite/ui/components/coral/foundation/form/datepicker
This works perfectly
Thansk
Arun
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies