Make WordPress Core

Opened 8 years ago

Last modified 4 years ago

#37145 assigned defect (bug)

Admin submenu opens underneeth editor link tool

Reported by: stoffe1's profile Stoffe1 Owned by:
Milestone: Future Release Priority: low
Severity: minor Version: 4.5.2
Component: Administration Keywords: has-screenshots 2nd-opinion needs-patch
Focuses: ui, css, administration Cc:


Sub menus of the admin menu opens underneath the editor's link tool. Possibly a z-index problem.

Attachments (6)

Screen Shot 2020-02-14 at 11.02.13 AM.png (65.6 KB) - added by valentinbora 4 years ago.
With Classic Editor
Screen Shot 2020-02-14 at 11.02.46 AM.png (51.4 KB) - added by valentinbora 4 years ago.
With Block Editor
37145-classic-editor.png (179.2 KB) - added by samful 4 years ago.
Screen Shot 2020-08-05 at 11.22.44 AM.png (23.5 KB) - added by kevin940726 4 years ago.
Popup overlapping weirdly with side menu
WordPress Bug.mkv (1.2 MB) - added by musicaljoeker 4 years ago.
Showing the z-index bug of the wpadminbar
Veat9Ti.mp4 (299.5 KB) - added by musicaljoeker 4 years ago.
Showing the z-index bug of the wpadminbar

Download all attachments as: .zip

Change History (18)

#1 @valentinbora
4 years ago

  • Milestone set to 5.5
  • Owner set to valentinbora
  • Priority changed from normal to low
  • Severity changed from normal to minor
  • Status changed from new to accepted

Thank you so much for your ticket @Stoffe1 and welcome to WordPress Trac. We are sorry for the long time to reply, but all tickets matter!

4 years ago

With Classic Editor

#2 @valentinbora
4 years ago

  • Keywords good-first-bug has-screenshots added

Issue confirmed at [47289] with both Classic and Block editor.

#3 @samful
4 years ago

  • Focuses css added
  • Keywords needs-design-feedback 2nd-opinion added

Removing this line:
z-index: 100100; /* Same as the other TinyMCE "panels" */

from the div.mce-inline-toolbar-grp { rule in the wp-includes/css/editor.css

Solves the issue for the Classic Editor, but then the link tool appears behind the Admin Menu as in the screenshot below, is this the expected fix, or did you only want it to go behind the submenu?

Making Gutenburg like this would involve targeting the .components-popover CSS class for each each popup you want to act this way, or making the z-index of it less than the menu's.

At smaller screen/window sizes I would argue that this functionality would be missed and having a pop-up appear over the menu would be helpful. Can we get a second opinion on this?

#4 @jaymanpandya
4 years ago

I am not really sure on how to make changes on the code but here are the 2 changes that I think will fix the issue

  • Add a new css rule targetting the id "adminmenumain" in load-styles.php:17 and set it to position relative and z-index to 100101 (1 more than the z-index of tinymce popover)
  • Fix Admin bar layering by changing z-index from 99999 to 100101 to load-styles.php:4:1358

#5 @michaelarestad
4 years ago

  • Keywords needs-design-feedback removed

It sounds like there isn't a need for design feedback here. Either of the fixes to z-index should get the job done.

#6 @davidbaumwald
4 years ago

  • Keywords needs-patch added
  • Owner valentinbora deleted
  • Status changed from accepted to assigned

Nothing stops multiple people from working on the same ticket at the same time. But I'm removing the ticket owner to make it clear no one is actively working on this one(the current owner has not participated in a long period of time).

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.

4 years ago

#8 @SergeyBiryukov
4 years ago

  • Milestone changed from 5.5 to Future Release

Some relevant z-index numbers:

  • Admin menu: #adminmenu .wp-submenu { z-index: 9999; }
  • Link modal in block editor: .components-popover { z-index: 1000000; }
  • Link modal in classic editor: div.mce-inline-toolbar-grp { z-index: 100100; }

At a glance, bumping #adminmenu .wp-submenu to 1000001 should fix this, but needs a careful investigation of these values' history and possible side effects. Moving to a future release for now.

Last edited 4 years ago by SergeyBiryukov (previous) (diff)

#9 @musicaljoeker
4 years ago

Updating the value #adminmenu .wp-submenu { z-index: 9999; } to z-index: 1000001 does not force the submenu to appear over the link menu in the editor.

Instead, updating #adminmenuwrap { z-index: 9990 } to z-index: 1000001 forces the menu to appear over the editor link. However, this means a child elements of #adminmenuwrap may have a z-index lower than its parent, is this a concern? Do we need to cascade z-index heights?

Making this changes doesn't appear to cause any issues in the testing I've done, but this might not be an acceptable solution.

4 years ago

Popup overlapping weirdly with side menu

#10 @kevin940726
4 years ago

@musicaljoeker Unfortunately, just updating z-index of #adminmenuwrap to 1000001 will cause another side effect shown in the attachment above.

IMHO, I think this is currently not solvable, at it seems to be in a bigger scope than we thought.

The stacking context of the page is roughly like this:


So, we cannot make .components-popover show between #adminmenuwrap and .wp-submenu-wrap. The only option I can see is to "portal" the popovers/submenu to desired location and control their positioning with JavaScript somehow, and that's a huge amount of work.

However, we might could get an update to the side bar after 47012 landed, and hopefully, we could solve this issue once and for all.

#11 @kevin940726
4 years ago

  • Keywords good-first-bug removed

#12 @musicaljoeker
4 years ago

@kevin940726 I agree with you. I did some more discovery on this issue and also found more problems when the z-index on #adminmenuwrap was updated to 1000001. In my testing, it also impacts the #wpadminbar

Resolving this does seem like it will take a bit of coordination.

Last edited 4 years ago by musicaljoeker (previous) (diff)

4 years ago

Showing the z-index bug of the wpadminbar

4 years ago

Showing the z-index bug of the wpadminbar

Note: See TracTickets for help on using tickets.