Tinymce: toolbar_sticky with sticky-top navbar

Created on 9 Mar 2020  路  3Comments  路  Source: tinymce/tinymce

When scrolling, the toolbar hides behind the navbar of the bootstrap.

http://fiddle.tinymce.com/udhaab

I would like the toolbar to be under the sticky navbar.

I'm currently using the latest version of TinyMCE.

ui feature

Most helpful comment

I think a general solution will be a new configuration, called for example toolbar_sticky_top_offset (as an integer number). And if your application has a fix (also sticky) header (like the bootstrap navbar in your example), you could set this number to "100". And after this, the TinyMCE sticky toolbar will be 100 pixel lower than the real top of the page (something like position:absolute; top:100px;). And also, this param effects the scrolling event, when to fire the .tox-tinymce--toolbar-sticky-on class.

All 3 comments

When will this thing be fixed?

I think a general solution will be a new configuration, called for example toolbar_sticky_top_offset (as an integer number). And if your application has a fix (also sticky) header (like the bootstrap navbar in your example), you could set this number to "100". And after this, the TinyMCE sticky toolbar will be 100 pixel lower than the real top of the page (something like position:absolute; top:100px;). And also, this param effects the scrolling event, when to fire the .tox-tinymce--toolbar-sticky-on class.

I figured out a workaround for this... turn on the toolbar_sticky and then simply overwrite the CSS like so:

.tox-tinymce--toolbar-sticky-on .tox-editor-header {
        top:80px !important;
}

Change the 80px to whatever your fixed header height is.

Was this page helpful?
0 / 5 - 0 ratings