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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LSU_JBob’s picture

Status: Active » Needs review
FileSize
427 bytes

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

Wim Leers’s picture

#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

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

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

Component: contextual.module » edit.module
jessebeach’s picture

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

Status: Needs review » Reviewed & tested by the community

Updating the status to RTBC.

alexpott’s picture

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

Issue summary: View changes

Updated issue summary.