Question

I’ve got a setup with multiple text area’s on multiple jQuery tabs, all making use of Tiny MCS for WYSIWIG editing. I’m using jQuery to control the size of the text areas to keep them uniform, but I’m running into a problem. Only the text areas on the first tab are sized correctly – the rest default to 20 columns. If I remove Tiny MCE from the equation, everything sizes correctly. Is there some way to work around this? Here’s my code:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui-1.7.1.custom.min.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js") %>"></script>

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
        $("textarea").attr("cols", 80);
        $("textarea").tinymce({
            // various Tiny MCE settings here
        });
    });
</script>

Answer 1

Found it. Looks like instead of using the “cols” attribute on the textarea itself I should be using the “width” setting of Tiny MCE:

$("textarea").tinymce({
    // various Tiny MCE settings here
    width: "500"
});