Problem/Motivation

The z-index of the contextual in-place editing toolbar is lower than the Drupal dialog element z-index. When uploading an inline image, the dialog can appear below the entity editing toolbar, making it difficult if not impossible to access the form in the dialog.

Screenshot of the inline image upload Drupal dialog positioned below the entity editing toolbar

Proposed resolution

Adjust the z-index of the entity editing toolbar or the Drupal dialog so that the dialog is always rendered above the toolbar.

Remaining tasks

Propose a patch.

User interface changes

The Drupal dialog will not be hidden behind the entity editing toolbar.

API changes

None.

#1932652: Add image uploading to WYSIWYGs through editor.module
#1872296: Edit should use core-provided Dialog (instead of its own)

Original report by @jessebeach

CommentFileSizeAuthor
#6 Screenshot of the contextual edit toolbar positioned below the jQuery modal screen on the z-index axis.143.59 KBjessebeach
#1 editing_toolbar_appears_above_drupal_dialog-2067285.patch427 bytesLSU_JBob
Screenshot of the inline image upload Drupal dialog positioned below the entity editing toolbar98.57 KBjessebeach

Comments

LSU_JBob’s picture

LSU_JBob commented
Status: Active » Needs review
StatusFileSize
new editing_toolbar_appears_above_drupal_dialog-2067285.patch427 bytes

changing the index to 100 fixed it for me ( in chrome )

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

#1872296: Edit should use core-provided Dialog (instead of its own) is also affected by this.

#1: Thanks! But doesn't that break other things? There are a lot of carefully tuned z-indexes in edit.module.css! :)

LSU_JBob’s picture

LSU_JBob commented

I clicked around and it didn't seem to do that for me. I only did it in chrome though so it's a possibility.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

You're right — it works perfectly.

The reason it works perfectly is that the entity toolbar is now no longer in the same position in the DOM; as of #1678002: Edit should provide a usable entity-level toolbar for saving fields is is absolutely positioned and hence a z-index of 350 is no longer necessary.

Jesse Beach is the CSS expert *and* she worked on #1678002. So I'm leaving the RTBC decision up to her, because this change might have repercussions I'm not anticipating. As far as I'm concerned, this is RTBC however.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Component: contextual.module » edit.module
jessebeach’s picture

jessebeach commented
StatusFileSize
new Screenshot of the contextual edit toolbar positioned below the jQuery modal screen on the z-index axis.143.59 KB

Thanks LSU_JBob! I tested this patch with the image upload patch (#1932652). The z-index change puts the contextual edit toolbar below the jQuery UI modal screen as desired. I also checked all the instances of z-index in core/modules and core/assets. This appears to be a good value, that being an index of 100. Let's go with it.

Screenshot of the contextual edit toolbar positioned below the jQuery modal screen on the z-index axis.

jessebeach’s picture

jessebeach commented
Status: Needs review » Reviewed & tested by the community

Updating the status to RTBC.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Reviewed & tested by the community » Fixed

Committed cc249ad and pushed to 8.x. Thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Updated issue summary.