title: TinyMCE editor toolbar height is incorrect?
body: <p><strong>EDIT: I've now included a working jsfiddle - please go to the bottom of the post.</strong></p>
  
  <p><a href="https://www.tinymce.com/docs/configure/editor-appearance/#height" rel="nofollow noreferrer">According to the TinyMCE docs, the height property of the editor</a>: </p>
  
  <blockquote>
    <p>sets the height of the editable area only. It does not include the
    space required for the menubar, toolbars or status bar.</p>
  </blockquote>
  
  <p>My editor only has a toolbar and I'm currently trying to derive the toolbar height so that I can set an accurate height for the whole editor.</p>
  
  <p>My problem is that <strong>when I try to derive the editor toolbar height it is incorrect:</strong></p>
  
  <p>My DOM structure looks like this:</p>
  
  <pre><code>&lt;div id = "outer"&gt;
     &lt;div id = "textArea" + dynamically created unique editor id&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The textArea div can either be maximized or not.</p>
  
  <p>Not maximized:
  <br>
  <a href="https://i.stack.imgur.com/Cn01j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cn01j.png" alt=""></a></p>
  
  <p>Maximized:
  <a href="https://i.stack.imgur.com/rAYDt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rAYDt.png" alt=""></a>
  <br>
  <br>
  <em>When not maximized, I can see in Chrome DevTools that the clientHeight property of "#outer" + " .mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first" is 64, and 34 if maximized.</em></p>
  
  <p>Yet, when I try to get this value via code in my editor's setup callback it always comes out as 326.</p>
  
  <p>What's going on?</p>
  
  <pre><code>tinymce.init({
     selector: "#textArea" + uniqueEditorId,
     menubar: false,
     statusbar: false,
     browser_spellcheck: true,
     contextmenu: false,
     plugins: "textcolor link",
     font_formats: "Sans Serif = arial, helvetica, sans-serif;Serif = times new roman, serif;Fixed Width = monospace;Wide = arial black, sans-serif;Narrow = arial narrow, sans-serif;Comic Sans MS = comic sans ms, sans-serif;Garamond = garamond, serif;Georgia = georgia, serif;Tahoma = tahoma, sans-serif;Trebuchet MS = trebuchet ms, sans-serif;Verdana = verdana, sans-serif",
     toolbar: "fontselect | fontsizeselect | bold italic underline | forecolor | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link unlink | undo redo",
  
     width: textArea.clientWidth, 
     // I want to figure this out dynamically, rather than hard-coding it.
     height: textArea.clientHeight - 64, 
  
     setup: function(editor) {
        editor.on("init", function() {
           var edToolbar = document.querySelector("#outer" + " .mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first");
           // Always 326
           console.log("edToolbar.clientHeight: " + edToolbar.clientHeight);
        });
     }
  });
  </code></pre>
  
  <p><strong>Jsfiddle: <a href="https://jsfiddle.net/80351/6o9j75d1/2/" rel="nofollow noreferrer">https://jsfiddle.net/80351/6o9j75d1/2/</a></strong>
  <br>
  In the Jsfiddle example above, I want the TinyMCE editor to resize in height to be the exact same overall height as the inner div. Uncomment the section with the editor initialisation after watching the inner resizing to see what I mean by that. </p>
  
  <p>Although I use <code>editor.theme.resizeTo(getInnerWidth(), getInnerHeight());</code> every time the outer div changes height, the resized height is mostly incorrect.</p>