CODEWITHSUNDEEP
jqueryhtmlcsstinymce
Kamil Sindi
Kamil Sindi

Reputation: 22832

TinyMCE Doesn't Fit in Page When Using JQuery

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!

Upvotes: 2

Views: 2006

Answers (3)

Kamil Sindi
Kamil Sindi

Reputation: 22832

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.

Upvotes: 1

Thariama
Thariama

Reputation: 50832

It might help to put the tinymce buttons (UI objects) into more than one row. This won't solve the underliing problem, but it could be that your tinymce will fit in in most cases.

Upvotes: 2

Cubic Digital Team
Cubic Digital Team

Reputation: 186

Have you tried setting the width and height properties in the tinymce definition?

$('textarea.tinymce').tinymce({

           width: '100px',
           height: '100px',

           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"     
        });

Upvotes: 0

Related Questions