title: How to determine Google Sheets window size
body: <p>In a Modal Dialog launched from a Google Sheet-contained script, is there some way to determine what the size of the browser window or host display is? I want to be able to set the width of a dialog to a percentage of the user's display, so support a variety of machines.</p>
  
  <p>Normal jQuery techniques like <code>$( window ).width()</code> and <code>$( document ).width()</code> return the width of the <em>dialog</em>, which isn't what I want (and is unique to this environment).</p>
  
  <p>Trying to refer to any of the div containers outside of the dialog returns <code>null</code> (I've tried <code>"#docs-editor-container"</code>, <code>"modal-dialog-bg"</code>, and a few others.)</p>
  
  <p><img src="https://i.stack.imgur.com/4o7rM.png" alt="screenshot"></p>
  
  <p>Here's a simple script to recreate this dialog with the results I've got so far.</p>
  
  <h3>Code.gs</h3>
  
  <pre><code>function openDialog() {
    var htmlOutput = HtmlService.createHtmlOutputFromFile('Dialog')
       .setWidth(500)
       .setHeight(400);
    SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'How wide is the screen?');
    return;
  }
  </code></pre>
  
  <h3>Dialog.html</h3>
  
  <pre><code>&lt;div id="outer" style="padding:1;"/&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(function() {
      reportSizeOf( 'window',$(window) );                   // 500 - expected
      reportSizeOf( 'document',$(document) );                 // 500 - same as window
      reportSizeOf( '#docs-editor-container',$('#docs-editor-container'));  // null
      reportSizeOf( 'modal-dialog-bg',$('modal-dialog-bg'));         // null
    });
  
    function reportSizeOf( elname, element ) {
      $('#outer').append('&lt;br&gt;Width of "' + elname + '": ' + element.width());
    }
  &lt;/script&gt;
  </code></pre>