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:

enter image description here

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

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -