Databases
StackOverflow2013
Postsdbo
POTinyMCE Doesn't Fit in Page When Using JQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTinyMCE Doesn't Fit in Page When Using JQuery
    text
    copied!<p>I've created a "compose note" button that when clicked displays an initially hidden div that contains a form with a TinyMCE textarea.</p> <p>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.</p> <p>My guess is that it must be a CSS problem but I've been fiddling around with the CSS with no success.</p> <p>Please find my JQuery code below.</p> <pre><code>$(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'}); } }); }); </code></pre> <p>Please find my CSS below:</p> <pre><code>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;} </code></pre> <p>Please find my HTML below:</p> <pre><code>&lt;div id="compose"&gt; &lt;!--Form--&gt; &lt;form action="&lt;?php htmlout($action); ?&gt;" method="post" id="compose-form"&gt; &lt;ul&gt; &lt;!--Name--&gt; &lt;li&gt;&lt;label for="note_name"&gt;Name:&lt;/label&gt;&lt;input type="text" name="note_name" id="note_name" value=""/&gt;&lt;/li&gt; &lt;!--Note Type--&gt; &lt;li&gt; &lt;label for="note_type"&gt;Type:&lt;/label&gt; &lt;select name="note_type" id="note_type"&gt; &lt;option value=""&gt;Select one:&lt;/option&gt; //PHP stuff &lt;/option&gt; &lt;?php endforeach; ?&gt; &lt;/select&gt; &lt;/li&gt; &lt;!--Tags--&gt; &lt;li&gt;&lt;label for="tag"&gt;Tags:&lt;/label&gt;&lt;input type="text" name="tag" id="tag_search"&gt;&lt;/li&gt; &lt;!--Text--&gt; &lt;li&gt;&lt;label for="note_text"&gt;Notes:&lt;/label&gt;&lt;textarea class="tinymce" name="note_text" id="note_text"&gt;&lt;?php htmlout($note_text); ?&gt;&lt;/textarea&gt;&lt;/li&gt; &lt;!--ID--&gt; &lt;li&gt;&lt;input type="hidden" name="note_id" value="&lt;?php htmlout($note_id); ?&gt;"/&gt; &lt;input type="submit" value="&lt;?php htmlout($button); ?&gt;"/&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>Thanks in advance!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload