Question

I’ve created a “compose note” button that when clicked displays an initially hidden div that contains a form with a TinyMCE textarea.

The problem I’m having is that, when displayed, the TinyMCE textarea is way too wide and doesn’t fit in the rest of the page. It just protrudes out with everything else past the page being white. I don’t have the same problem with my other TinyMCE textareas where the width adjusts as I adjust the width of my browser.

My guess is that it must be a CSS problem but I’ve been fiddling around with the CSS with no success.

Please find my JQuery code below.

$(document).ready(function() {
    $('#compose-button').click(
    function() {
        if ($(this).val() == "Compose note") {
            $(this).val("Cancel note");
            $('#compose').css({'display' : 'block'});
            $('textarea.tinymce').tinymce({  
               script_url : 'jscripts/tinymce_3.4.1_jquery/tinymce/jscripts/tiny_mce/tiny_mce.js',  
               theme : "advanced",
               plugins: "save, table, tinyautosave, imagemanager, spellchecker, autoresize",
               theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table",
               theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker",
               theme_advanced_buttons2 : "",
               theme_advanced_buttons3 : "",
               theme_advanced_toolbar_location : "top",
               theme_advanced_toolbar_align : "left"     
            });  
        }
        else {
            $(this).val("Compose note");
            $('#compose').css({'display' : 'none'});
        }
    });
});

Please find my CSS below:

html, body {
    font-family: Verdana, Arial, sans-serif;
    width: 100%;
    height: 100%;
    font-size: 12px;
    min-width: 780px;
    min-height: 500px;
    }
div#compose{display: none;}
#compose ul{list-style: none; margin-left: 10px;}
#compose li{padding: 3px;}
#compose label {width: 30px; padding-right: 30px; float: left;}
#compose input, #compose select {color:black; width: 400px; text-align: left;}

Please find my HTML below:

<div id="compose">
    <!--Form-->
    <form action="<?php htmlout($action); ?>" method="post" id="compose-form">
    <ul>
        <!--Name-->    
        <li><label for="note_name">Name:</label><input type="text" name="note_name" id="note_name" value=""/></li>

        <!--Note Type-->
        <li>
            <label for="note_type">Type:</label>
            <select name="note_type" id="note_type">
                <option value="">Select one:</option>
                //PHP stuff
                </option>
                <?php endforeach; ?>
            </select>
        </li>

        <!--Tags-->
        <li><label for="tag">Tags:</label><input type="text" name="tag" id="tag_search"></li>

        <!--Text-->      
        <li><label for="note_text">Notes:</label><textarea class="tinymce" name="note_text" id="note_text"><?php htmlout($note_text); ?></textarea></li>

        <!--ID-->    
        <li><input type="hidden" name="note_id" value="<?php htmlout($note_id); ?>"/>
        <input type="submit" value="<?php htmlout($button); ?>"/></li>
    </ul>
    </form>
</div>

Thanks in advance!

Answer 1

The problem is with the autoresize plugin. Remove it. If you want to keep it, then also use theme_advanced_resizing : true to resize it to whatever you want.

autoresize also makes initialization much slower.