javascript - How to get TinyMCE fullscreen mode to work with Bootstrap NavBar -
just started using tinymce in mvc razor project , impressed html editing.
when went use fullscreen (using 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 appears underneath bootstrap header bar:
what "correct" way make tinymce edit appear either underneath, or on top of, bootstrap nav bar? preferably between header , footer, fullscreen do.
i tried setting top and/or margins of mce-fullscreen
class, using style below, a) seems hacky , b) not work height full screen scrollbars disappear off bottom.
div.mce-fullscreen { top: 55px; }
for "fullscreen" tinymce, over top of bootstrap nav bar, need set z-index
of .mce-fullscreen
class greater nav bar's z-index
.
if using less
, there variable in bootstrap variables.less
file called @zindex-modal
used define z-index of bootstrap modal popups. this:
div.mce-fullscreen { z-index: @zindex-modal; }
or, if use bootstrap "raw" then:
div.mce-fullscreen { z-index: 1050; }
note: this not place between header , footer, still looking better answer.
Comments
Post a Comment