title: Dynamically resizing Chrome Extension Popup Window Height
body: <p>I am building a chrome extension which has shows dynamically updated HTML in the popup window when the extension icon is clicked.  I have noticed that the size of the popup window is sometimes (about once in every 6 clicks) too small to show the text being displayed.  Usually, it is the height that is very reduced (leading to a lot of vertical scrolling being required to view the content of the popup) but sometimes (once in about 15 clicks), the width of the popup is affected as well.</p>
  
  <p>Troubleshooting steps I have already taken with no improvement</p>
  
  <ol>
  <li>Declared <code>&lt;!DOCTYPE html&gt;</code></li>
  <li><p>Specified in CSS</p>
  
  <p>body {
   width: 700px,
   min-height: 400px
  }</p>
  
  <p>\\ id of div containing the content<br>
  #htmlcontent {
    width: 700px,
    min-height: 400px
  }</p></li>
  </ol>
  
  <p><br>
  3. Used javascript to modify body height and width after onload event</p>
  
  <pre><code>window.onload = function(){
      var content = document.getElementById('htmlcontent');
      var height = content.scrollHeight + 20;
      document.body.style.minHeight = height + 'px';
      document.body.style.minWidth = "700px";
      window.scroll(0,0);
  }
  </code></pre>
  
  <ol start="4">
  <li><p>Using an iFrame is not a practical solution as the content being displayed is local to the machine</p></li>
  <li><p>There are no hidden elements in the HTML tree</p></li>
  </ol>
  
  <p><br>
  <br>
  Code snippets
  <br>
  <br></p>
  
  <p>popup.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript" src="underscore.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="popup.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="banner"&gt;
          &lt;img src="/icons/iconx19.png" width="19" height="19"&gt;
          &lt;p&gt;Title Text&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="canvas"&gt;
          &lt;!--content goes here --&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>popup.js</p>
  
  <pre><code>var popupText = '&lt;div class="main_record"&gt;blah, blah, blah&lt;/div&gt;';  // dynamically generated html
  document.getElementById('canvas').innerHTML = popupText;
  
  
  // ensures the popup window is the proper width and height
  window.onload = function(){
    var popupWidth = 700;  // default width of popup in px
    var animationDelay = 250;  // wait time for popup animation to complete
    setTimeout(function(){
      var popupHTML = document.getElementById('canvas');
      var rawHeight = parseInt(popupHTML.offsetHeight) + 20;
  
      document.body.style.minWidth = popupWidth + 'px';
      document.body.style.minHeight = rawHeight + 'px';
      window.scroll(0,0);
    }, animationDelay);
  };
  </code></pre>
  
  <p>popup.css</p>
  
  <pre><code>.container {
    overflow-x: auto;
    background-color: rgb(246, 246, 239);
  }
  
  .banner {
    background-color: rgb(255, 102, 0);
    width: 700px;
    overflow: auto;
    height: 24px;
  }
  
  .banner img{
    float: left;
    margin-left: 5px;
    margin-top: 3px;
  }
  
  .banner p{
    color: #000000;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    position: absolute;
    top:0px;
    left: 30px;
  }
  
  #canvas {
    overflow-x: auto;
    width: 700px;
  }
  
  .main_record {
    margin-left: 5px;
  }
  
  .main_record .title {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    color: #000000;
    margin-bottom: 2px;
  }
  
  .main_record .subtitle {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 7pt;
    color: #828282;
    margin-top: 4px;
  }
  
  .main_record a{
    color: #828282;
  }
  
  .main_record a:focus{
    outline-style: none;
  }
  </code></pre>