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