WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 7 days ago

#37145 assigned defect (bug)

Admin submenu opens underneeth editor link tool

Reported by: 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:

Description

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

http://i.imgur.com/7PMPxb6.png

Attachments (6)

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

Download all attachments as: .zip

Change History (18)

#1 @valentinbora
6 months 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!

@valentinbora
6 months ago

With Classic Editor

#2 @valentinbora
6 months ago

  • Keywords good-first-bug has-screenshots added

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

#3 @samful
3 months 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
7 weeks 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
6 weeks 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
3 weeks 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.


3 weeks ago

#8 @SergeyBiryukov
3 weeks 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 3 weeks ago by SergeyBiryukov (previous) (diff)

#9 @musicaljoeker
10 days 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.

@kevin940726
8 days ago

Popup overlapping weirdly with side menu

#10 @kevin940726
8 days 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:

Body
  #adminmenuwrap
    .wp-submenu-wrap
  .components-popover

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
8 days ago

  • Keywords good-first-bug removed

#12 @musicaljoeker
7 days 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

https://imgur.com/Veat9Ti

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

Last edited 7 days ago by musicaljoeker (previous) (diff)

@musicaljoeker
7 days ago

Showing the z-index bug of the wpadminbar

@musicaljoeker
7 days ago

Showing the z-index bug of the wpadminbar

Note: See TracTickets for help on using tickets.