Search code examples
wordpresstinymcefullscreen

TinyMCE full screen mode in WordPress and obscuring elements

My website uses the TinyMCE 4 toolbar with Wordpress 5.2.4.

As you can see, it has a navigation menu:

Navigation bar

At the bottom it has a language bar:

Language bar

My TinyMCE toolbar is displayed when creating / editing bbPress forum topics and it has a full screen toggle:

Full Screen toggle

My problem is that when I go to full screen mode the main menu and language bar are still visible. Atleast, the menu should not be showing:

Full screen mode

How can I stop this from happening?

Solution

  • The gTranslate wrapper has a z-index of 9999999 which is difficult to beat.

    enter image description here

    I would suggest you to lower this value under the Tiny Mce wrapper z-index value

    Update

    New clarifications:

    • The MCE Editor default z-index is 100010.
    • The MCE Editor pop-up windows z-index (like Insert Image) are 100100.

    So the gTranslate wrapper has to be below 100010. In addition, the main-navigation ul index is too high too.

    The following added to the Additional CSS section of the website resolves the issues:

    div#gtranslate_wrapper {
    z-index: 100000 !important;
}

.main-navigation ul {
    z-index: 100000 !important;
}

    This way, all elements are hidden but not the pop-up windows used by the MCE editor itself.