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

Share Improve this question Follow edited Jun 10, 2013 at 1:49 Christoffer Bubach asked Jun 9, 2013 at 20:47 Christoffer BubachChristoffer Bubach 1,68633 gold badges1717 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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"