tinyMCE's iframe or table height is not resizing properly

Question

I have successfully added a tinyMCE editor to my web-app so that users can make notes. I have the textarea it replaces inside a div, so that the div can resize with the page, and the textarea can always be set at width: 100% and height: 100%

My tinyMCE.init looks as follows:

tinyMCE.init({
  mode: "specific_textareas",
  editor_selector: "notes-editor",
  theme: "advanced",
  plugins: "",
  theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,bullist,numlist,|,undo,redo,|,forecolor,backcolor",
  theme_advanced_toolbar_location: "top",
  theme_advanced_toolbar_align: "left",
  theme_advanced_statusbar_location: "none",
  theme_advanced_resizing: false,
  height: "100%",
  width: "100%"
});

Unfortunately, this returns an editor that looks as follows:

No matter how I change the height, be it from CSS or JS, that "strip" of where I can edit never changes. The odd thing is that this only applies to the height.

I have done everything from trying to change the table (i.e. note_contents_tbl) to the iframe (i.e. note_contents_ifr) but nothing.

Any help would be greatly appreciated.

Answer 1

By setting the height and width to 100% doesn't work. TinyMCE creates the editor inside an iframe, which in turn is nested inside a table. Setting height to 100% does not inherit the size of the div.

I think this could be your problem and if really this is the problem then you should change the width and height values from % to numeric values exactly the width and height of your wrapper div or whatever you want and to do so remove the % from init just use, i.e.

height: "300",
width: "500"

To change the size programmatically you can use

var ed = tinymce.activeEditor;
var width = '500';
var height = '300';
ed.theme.resizeTo(width, height);

tinyMCE Configuration and another answer on SO.