TinyMCE width and height disobedient!

Question

According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the

Answer 1

I am facing the same problem but I end up doing this

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}

Answer 2

Yes, this is very annoying. I wrote my own function to adjust the height to the given input. You may modify it to set your height/width as you wish:

    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },

Answer 3

Add a 'body_id' using tinymce.init and then use that id in 'content_css' to give the editor the desired css behavior. Like so:

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

And then in app.css:

#new-journal-editor {
    height: 123px;
    width: 123px;
}

Answer 4

I found the TinyMCE text-area (called '.mceContentBody' in my theme) too small and awkwardly margined in the new post content area. In my theme there's a css file called editor-style. I changed the width (to 98%) yet since TinyMCE uses cookies to remember the editor size, the CSS changes weren't sticking. After CLEARING MY BROWSER'S CACHE, the CSS width/margin changes took effect. Finally. Gah.

Answer 5

im setting width and height to editor area like this

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>

Answer 6

Here is my fix.
It works also for multiple instances of TinyMCE editors (init() with 'height' property works only for the first instance, so it's a workaround to achieve a fixed or minimum height of the editor box).

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}