How to determine Google Sheets window size

Question

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.

Normal jQuery techniques like $( window ).width() and $( document ).width() return the width of the dialog, which isn't what I want (and is unique to this environment).

Trying to refer to any of the div containers outside of the dialog returns null (I've tried "#docs-editor-container", "modal-dialog-bg", and a few others.)

screenshot

Here's a simple script to recreate this dialog with the results I've got so far.

Code.gs

function openDialog() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Dialog')
     .setWidth(500)
     .setHeight(400);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'How wide is the screen?');
  return;
}

Dialog.html

<div id="outer" style="padding:1;"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(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('<br>Width of "' + elname + '": ' + element.width());
  }
</script>

I've had no luck with this in the past. I don't think Caja disseminates any knowledge of the actual browser window. — rGil, Aug 14 '14 at 00:01
Not sure of your control logic, but what about getting the values before the dialog is up and then passing the values to the openDialog() function? — Fuhrmanator, Aug 17 '14 at 05:10
@Fuhrmanator - If only I could. The size isn't determined until after loading, otherwise users sit looking at a blank screen (and clicking a few more times) before anything happens. It can take 30s+ to render one of the divs. Even then - if I want the max width to stay within the user's display, I have no way to know what that is. — Mogsdad, Aug 17 '14 at 05:20
A quick try with `alert("Window width " + $(window).width() + " Document " + $(document).width() );` inside the document load function of the Sidebar.html (this is not server-side) of my add-on got me `Window width 300 Document 850`, but I realize now you're not talking about an add-on. — Fuhrmanator, Aug 17 '14 at 14:59
@Fuhrmanator: Ah, but I AM talking about an add-on. It has both a sidebar and a modal dialog. I've put that alert in the load for my sidebar, and I got `Window width 300 Document 300`. If you truly have that working, please post it as an answer. — Mogsdad, Aug 17 '14 at 19:45
I went back and found out what was happening. I had loaded an image (for another test) in my sidebar, and 850 was its width. Sorry for the wild goose. — Fuhrmanator, Aug 17 '14 at 21:08

score 2 · Answer 1 · edited May 23 '17 at 11:46

If the Add-on iframe origin was the same, we could jump out of 2 iframes with:

parent.parent.document.body.clientHeight

to access it as noted in this post.

Since it's not, an enhancement request is probably needed for Docs to pass max sizing onto Add-on iframe via postmessage or some other cross-origin mechanism. Adding a maxHeight and width to the existing Browser class may be more straight-forward, but think that was designed for just adding browser-type widgets.

Setting a larger than needed width does fall back to the max-width of Docs window but it causes the close button to be out of view for the user forcing them to press esc. If you're wanting like a 90% max height / width view of Docs, doesn't seem possible currently.

score 0 · Answer 2 · answered Aug 14 '14 at 04:52

You can try to get the size of the screen development a DIV with CSS style on Width=100% and Height=0%. Then use the document.getElementById("container").offsetHeight

The problem is that you can use it only on SandBox EMULATE mode (HtmlService.SandboxMode.EMULATED).

Here an example (https://script.google.com/d/10kzZ1DiTsere_BdjLEnIJcZaOHVCfcGF56DED6fMLY2PfY9g--h1Efrr/edit?usp=sharing):

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.EMULATED);
}

index.html

<style>
  #container{
    width: 100%;
/*    height: 100%; */
    background-color: #ccccff;
  }
</style>
<div id="container">
</div>
<script>
  alert(document.getElementById("container").offsetWidth);
/*  alert(document.getElementById("container").offsetHeight); */
</script>

At this example, you can delete the comments (/* */) and try to get the Heigth size too.

To spanish and complete version, check https://sites.google.com/site/appsscriptenespanol/obtener-tamano-maximo-de-pantalla-en-apps-script-usando-htmlservice

This question is about a modal dialog in a spreadsheet...your answer is about webapps... these are 2 different things. Your answer is simply irrelevant. — Serge insas, Aug 14 '14 at 06:34
Serge is right - your example will not work in a modal dialog. — Mogsdad, Aug 14 '14 at 11:51

How to determine Google Sheets window size

Code.gs

Dialog.html

2 Answers2