Why Is My Tinymce Hidden Textarea Acting Up?

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 cl

Solution 1:

Try adding some CSS to textareas that are hidden.

For example, use

<textareacols="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.

Solution 2:

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.

Solution 3:

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

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

<textareastyle="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:

functiontinymceLoaded(inst){
    // get the desired height of the editorvar height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0// Lets use the inline style text to solve this problemif(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'});
}

Solution 4:

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?

Solution 5:

From TinyMCE inside hidden div are not displayed as enabled when we put the div visible, user's slolife answer helped me:

Try calling tinyMCE.init(...) after you unhide the containing div.