Search code examples
javascriptjquerycsstwitter-bootstraptinymce-4

How to get TinyMCE fullscreen mode to work with Bootstrap NavBar

Just started using TinyMCE in an MVC razor project and very impressed with the HTML editing.

When I went to use it fullscreen however (using the following options) 

$('#ApplicationHtmlTemplate').tinymce({
    theme: "modern",
    plugins: "code,pagebreak,fullpage,table,fullscreen,paste,spellchecker",
    toolbar1: "undo | redo | copy | paste | searchreplace | spellchecker | table | pagebreak | fullpage | fullscreen"
})

I noticed it appears underneath the bootstrap header bar:

enter image description here

What is the "correct" way to make the TinyMCE edit appear either underneath, or on top of, the Bootstrap nav bar? Preferably between the header and footer, but fullscreen would do.

I tried setting the top and/or margins of the mce-fullscreen class, using the style below, but this a) seems hacky and b) does not work as the height is the full screen so the scrollbars disappear off the bottom.

div.mce-fullscreen {
    top: 55px;
}
Solution

  • For "fullscreen" TinyMCE, over the top of the Bootstrap nav bar, you just need to set the z-index of the .mce-fullscreen class to greater than the nav bar's z-index.

    If you are using Less, there is a variable in the bootstrap variables.less file called @zindex-modal used to define the Z-Index of Bootstrap modal popups. So you could do this:

    div.mce-fullscreen {
    z-index: @zindex-modal;
}

    Or, if you just use Bootstrap "raw" then:

    div.mce-fullscreen {
    z-index: 1050;
}

    Note: This does not place it between the header and footer, so still looking for a better answer.