tinymce resets the textarea size - bug and how to fix it?

Question

I'm drawing two textareas with tiny mce, which are within two divs, one for english and one for french. I show/hide the english/french div based on an english/french drop down.

When I select french to hide the english div and show the french div, the french tiny mce textarea has minimum size. When i take away the show/hide, the textareas are both drawn fine. This seems like a tiny mce bug. anyway to get around this?

here's the code:

        $(function () {
        $('textarea').tinymce({
            script_url: '/js/tiny_mce/tiny_mce.js',
            theme: "advanced"
        });

        $("#ddlLocales").change(function () {
            $(".localizedInput").hide();
                            //english or french
            $("." + $("#ddlLocales option:selected").text()).show();
        });
        //this is to trigger the change function on load.
        $("#ddlLocales").change();
    });

<div class="localizedInput english">

<textarea class = "eventInputTextArea"></textarea>

</div>

<div class="localizedInput French">
//this textarea's height and width get wiped out by tinymce only when implementing show/hide
<textarea class = "eventInputTextArea"></textarea>

<div>

//below is the css class that specifies the width and height of textarea
.eventInputTextArea{
    width:600px;
    height:400px;
}

Answer 1

You might try specifying the styles inline.

Answer 2

Workaround: You could update the heigth/width after selecting french to hide the english div.

For the heigth setting this code could look like

                iframe_id = ed.id + '_ifr';  // ed is the editor instance
                style = $('#' + iframe_id).attr('style');
                style_arr = style.split(';'); // width is first  [0]
                style_mod = style_arr[0] + ';height:' + ed.getParam('height') + 'px;';
                $('#' + iframe_id).attr('style', style_mod);

                // set table height
                iframe_tbl = ed.id + '_tbl';
                style = $('#' + iframe_tbl).attr('style');
                style_arr = style.split(';'); // width is first [0]
                style_mod = style_arr[0] + ';height:"10px;';
                $('#' + iframe_tbl).attr('style', style_mod);

Answer 3

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.