Problem/Motivation
The Drupal modal leverage the jQuery UI modal widget. The z-index of the widgets modal background (the transparent black screen that covers page contents) is set to a seemingly low value: 100. At this value, it's unlikely that the background will cover much in Drupal, including the Overlay which starts at a z-index of 500.
Here's an image illustrating how the modal background neither covers the Toolbar tray, nor the Edit in-place toolbar, both of which it should occlude from further action until the modal decision is satisfied.
Proposed resolution
Override and adjust the z-index of the jQuery modal dialog so that it covers core UI elements with certainty. We probably need to start at 1000. I don't personally know of any Drupal UI element that exceeds a z-index of 501. This gives contrib z-indices from 502 to 999, certainly sufficient room to play in.
Remaining tasks
Propose a patch
User interface changes
The Drupal modal will have the highest z-index of core UI elements in Drupal
API changes
None, this is a CSS issue.
Related Issues
#2071801: Client-side generated dialogs provide an inconsistent experience
#2067285: The entity in-place editing toolbar appears above the Drupal dialog
Original report by @jessebeach
Comment | File | Size | Author |
---|---|---|---|
#13 | 2072037-13.jpg | 60.07 KB | BiigNiick |
#8 | toolbar-z-index-2072037.patch | 1.41 KB | jimafisk |
#8 | Screen Shot 2014-01-25 at 5.06.49 PM.png | 61.44 KB | jimafisk |
#5 | Screen Shot 2013-09-11 at 3.23.37 PM.png | 27.91 KB | richardj |
Augue_Dignissim_Iaceo_Torqueo___Drupal_D8_Dev.png | 76.36 KB | jessebeach |
Comments
Comment #1
jessebeach CreditAttribution: jessebeach commentedadding modal placement tag.
Comment #2
nod_how about we lower the z-indexes everywhere else in Drupal. 500 is a crazy number…
Comment #3
richardj CreditAttribution: richardj commented@nod_ no it isn't, max value usable is basically a positive 32-bit integer so we can count to over 2 billion, not saying we have to use the max available value, but set it high enough that it will always cover other elements. Lowering all the other z-indexes is not really a workable solution because you can't take into account all the contrib modules and their z-indexes.
Comment #4
jessebeach CreditAttribution: jessebeach commented500 has been in place for a few years now. Dropping it will probably disrupt layering of some contrib modules are richardj mentions. There's no harm in leaving it at that level. We've got enough room to play over top of it.
Comment #5
richardj CreditAttribution: richardj commentedI remembered that there was an instance of a contrib module element showing on top of the overlay. This is when you use the Leaflet module, the Leaflet controls have a z-index of 1000.
I attached a screenshot.
This is only to give some perspective on the issue, i would say, make the z-index of the overlay ridiculously high so that no other module will try to top that. For me that seems the best option.
And on top of that, make the z-index of the modal window a bit more higher than that, so it stays self containing.
Comment #6
panda85 CreditAttribution: panda85 commentedComment #7
jimafisk CreditAttribution: jimafisk commentedClosed this issue because the Overlay module has been removed from Drupal 8 according to: https://drupal.org/node/2116417
Comment #8
jimafisk CreditAttribution: jimafisk commentedRe-opening: This ins't related to Overlay, it's related to core/misc/dialog.js
Was able to reproduce by going to admin/config/content/formats/manage/basic_html and clicking on "Show group names" and then "Add group" (see screenshot).
Needed to make edits in core/modules/toolbar/css/toolbar.module.css
See Attached patch. Thanks for the help jessebeach and drewbyist!
Comment #9
barraponto CreditAttribution: barraponto commentedUnrelated: we've got a typo here! Does this break something that should be working?
Comment #10
bendev CreditAttribution: bendev commentedTested patch , works as expected
Comment #11
nicolas@webstanz.be CreditAttribution: nicolas@webstanz.be commentedPatch installed, tested. It works.
Comment #12
alexpottThis only addresses toolbar z-index - I ponder the impact of this considering of other z-index usages in core. For example:
.contextual, .block-demo-backlink, .node-preview-container among others.
If this is only about toolbar then we need an issue summary about.
Comment #13
BiigNiick CreditAttribution: BiigNiick commentedmaybe this doesn't need fixed anymore. i don't see the problem still manifesting with a new core download. works same with the patch too.
here is a screenshot without the patch.