TinyMCE - external toolbar position

Question

Hello folks,

I am trying to work with TinyMCE in creating a multi-textbox, click-to-edit type graphical content editor. I have got TinyMCE to the point where I can add and remove them, position and size them, click to edit them, and so forth - but one thing is bothering me and that is the toolbar.

I have an external toolbar that I'm trying to position along the bottom edge of the page, along with my "Save and Close" button and some other toolbuttons. The external toolbar is created by TinyMCE in a DIV with class "mceExternalToolbar". I tried setting position: fixed and left: and top: attributes in the page stylesheet, but to no avail - TinyMCE sets position: absolute and top: -28px on the DIV when it creates it.

I cannot modify the source code for TinyMCE due to project restrictions, but I can supplement it with extra CSS files.

Can anyone point me in the right direction to get the toolbar positioned properly?

Answer 1

The CSS selectors in the provided stylesheets are overriding the selectors that you're writing. What you need to do is either target the toolbar element with a selector of greater specificity:

body div.mceExternalToolbar {
    position: fixed ;
    top: -28px ;
};

Or use the !important directive to override it:

.mceExternalToolbar {
    position: fixed !important ;
    top: -28px !important ;
}

For more detail about both selector specificity and !important, see the W3C's documentation.