WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 14 months ago

#31229 closed defect (bug) (wontfix)

Using TinyMCE Editor Dropdown Menus inside Modals

Reported by: bryanaka Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.1
Component: TinyMCE Keywords:
Focuses: ui Cc:

Description

The modal (for example, the image modal from the media library ".media-modal") has a z-index of 160000. The dropdown menu's in TinyMCE, such as the color picker, have a z-index value of 100100. set here -

https://github.com/WordPress/WordPress/blob/efe8fd4694ce1d5252af9856b2bfac396e76c8f9/wp-includes/js/tinymce/plugins/wordpress/plugin.js#L4

This basically leaves any of TinyMCE's float-panels unusable inside a modal.

It seems to me that the natural hierarchy of layering would be dropdowns and tooltips on top always, then modals, then masks, and finally everything else. This would make sure layering just works.

Change History (5)

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


5 years ago

#2 follow-up: @jorbin
5 years ago

In the above linked chat, Helen identified that:"we need to find out where the .media-modal z-index comes from and document that. if it can be lower, then it should be lower. and we can change the tinymce float panel to be above it and document that, i just don’t want to inflate the latter until we know where the former comes from."

#3 in reply to: ↑ 2 @bryanaka
5 years ago

Great to hear. I read the slack logs and seems reasonable. It's definitely hard to keep track of z-indexes.

If there is anyway that I can contribute to this bug and help the core team out, let me know.

Replying to jorbin:

In the above linked chat, Helen identified that:"we need to find out where the .media-modal z-index comes from and document that. if it can be lower, then it should be lower. and we can change the tinymce float panel to be above it and document that, i just don’t want to inflate the latter until we know where the former comes from."

#4 @GunGeekATX
4 years ago

Found this trac ticket while working on the same issue today, and ran into an issue with the inline toolbar that pops up on some of the embedded items (such as images).

In editor.css, div.mce-inline-toolbar-grp also has a z-index rule:
z-index: 100100; /* Same as the other TinyMCE "panels" */

Something to keep in mind once this ticket moves forward.

#5 @azaozz
14 months ago

  • Resolution set to wontfix
  • Status changed from new to closed

Unfortunately this is not easily fixable. The media modal is meant to be on top of all content on the screen, including the TinyMCE drop-downs (which are actually divs inserted from js at the bottom of the screen). Otherwise these drop-downs will be visible when the media modal is open.

There is some code in the TinyMCE UI intended to detect the z-index of the editor container which seems to be working in most cases, but if it fails, it's not trivial to fix.

This is somewhat superseded by the block editor. Closing as wontfix for now, please feel free to reopen with a patch to fix it for plugins that still use TinyMCE.

Note: See TracTickets for help on using tickets.