TinyMCE width and height disobedient!

Question

According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the

Answer 1

I noticed that a containing table was enforcing widths, and also the icon set are td's, so there's a minimum width they'll collapse down to, so if you have many icons in a single row - it could be messing all over your widths.

Sort of related SO question of mine, ended up being quite related to your problem: Able to float td elements consistently?

Answer 2

tinyMCE.init({
        mode : "exact",
         .....

mode : "exact" will disable the ability to resize grid by drag

Answer 3

I find the best method to restrict the width tinyMCE 4+ textarea is to wrap the textarea in a new div or span tag. Then apply the width to that. This way you get use percentage widths instead of fixed px. if you want to adjust height edit the rows="15" value.

example:

<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>

Answer 4

Although there are a lot of good suggestions here I found the answer by reading the question. There is NO problem with height or width so why all these work arounds with CSS or writing functions, the method in the docs works.

The original challenge was about resizing, the author never said the height or width didn't work, it just didn't do what he/she expected - it was only stated as quoted below:

"the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it."

Saidul Islam answered the question correctly and to take it one step further Stuart went on to describe how to turn off the cookies. If you need to set the height and width do it when in init() and be done. You can read more here:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

Sizing the input area in both height and width works as outlined below.

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});

Answer 5

I know all about this, it is very annoying.

Adding this to any loaded CSS file fixed the width for me (I just put it in the global css, not in any of the TinyMCE css files, I did not test with height):

.mceEditor > table {
    width:/* my width */ !important;
}

This would affect all instances, which was fine in my case. You can target the toolbar itself with .mceToolbar

You kind of do want TinyMCE to resize the textarea, so it can be wide enough to fit all the toolbar icons.

Answer 6

Its saves the last size because of the theme settings. You can turn it off by using the following

$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,