Why is my TinyMCE hidden textarea acting up?

Question

I have about 7 textareas on a web page, all of them are rich text editors using TinyMCE. However at page load only 1 of them is visible and the rest of them hidden. The user can click a 'show' link which would display the remaining textareas one by one.

However, I have a weird problem. All the textareas are setup like this:

<textarea cols="40" rows="20"></textarea>

However, only the textarea displayed on page load is the full size I want it to be. The remaining textareas are really small when I show them. So I'm thinking that perhaps they aren't rendered because they are hidden on page load.

How can I remedy this?

Answer 1

Try adding some CSS to textareas that are hidden.

For example, use

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>

I think I ran into this, where TinyMCE's CSS overrides some of the default CSS behaviour. I ended up having to "re-override" it, and eventually edited the TinyMCE's css pages.

Answer 2

Without having a few more specifics about your actual setup and how you're doing the vaious display/hide functionality it's hard to give a definitive answer. I can throw a few general thoughts out though:

• Do they render properly when you don't hide them on page load? That would give a definative answer for at what point the bug's occuring.
• When you toggle the view of the textarea can you explicity set the row/col attributes at the same time?
• Can you use css (maybe with !important) to set textarea width and height than to test if that has an effect?

Answer 3

I think this is an MCE bug, or at least a feature that MCE lacks.

Since I wanted to style my input box in CSS, not in HTML (yuck) I tried

visibility: hidden;

instead of

display: none;

and everything worked again.

I believe that the latter causes the element to take up no space, which trips up the MCE code which detects the width and height of the element.

Answer 4

When loading TinyMCE with jQuery, this problem can be solved as such:

1- On your textarea, specify a height in the inline style attribute:

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>

2- add a callback function when instantiating a TinyMCE editor. e.g. tinymceLoaded

$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'PATH_TO_TINYMCE.js',

    // General options ...
    // Theme options...

    // callback function
    init_instance_callback : "tinymceLoaded"
});

3- Set the height of your Editors in the tinymceLoaded function:

function tinymceLoaded(inst){
    // get the desired height of the editor
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0
    // Lets use the inline style text to solve this problem
    if(height == 0){
        height = $('#' + inst.editorId).css('height'); // 200px
        height = height.replace(/[^0-9]/g, "");    // remove all non-numeric characters to isolate the '200'
    }

    // set the height of the hidden TinyMCE editor
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}