I'm looking into using TinyMCE 4.0 inline and noticed that the toolbar is floating right above the div. I wanted to have it fixed under another toolbar on top of my page with:

position: fixed;
top: 60px;
width: 100%;

This would be a trivial CSS override, if not for the fact that tinyMCE seems to be changing the classes as you scroll. If you scroll the page down while editing inline eventually the toobar will stick to the page top - changing the styling as this happens.

I've looked in the documentation for a simple positioning option, and tried overriding the CSS. Is there something I've missed - or do I really have to start looking into changing the core JS for it to stop fiddling with the classes/styles? Any ideas on how to configure it's position?

I'm looking into using TinyMCE 4.0 inline and noticed that the toolbar is floating right above the div. I wanted to have it fixed under another toolbar on top of my page with:

position: fixed;
top: 60px;
width: 100%;

This would be a trivial CSS override, if not for the fact that tinyMCE seems to be changing the classes as you scroll. If you scroll the page down while editing inline eventually the toobar will stick to the page top - changing the styling as this happens.

I've looked in the documentation for a simple positioning option, and tried overriding the CSS. Is there something I've missed - or do I really have to start looking into changing the core JS for it to stop fiddling with the classes/styles? Any ideas on how to configure it's position?

• javascript
• jquery
• css
• tinymce

1 Answer 1

This was fixed in the new 4.0 version but absent when I first tried it in 4.0rc3. They added the editor configuration option:

fixed_toolbar_container: "#css3-selector"