Getting browser window dimensions in Google Sheets modal popup

Other Questions Google Sheets
1

I’m working with a modal popup that opens from a Google Sheets script. I need to figure out how to get the actual browser window size, not just the popup size. My goal is to make the popup width responsive based on a percentage of the user’s screen size to work well on different devices.

The usual methods like $(window).width() and $(document).width() only give me the popup dimensions, which doesn’t help. I also tried accessing parent containers but they return null values.

Here’s my test code:

main.gs

function showPopup() {
  var html = HtmlService.createHtmlOutputFromFile('Popup')
     .setWidth(400)
     .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Screen Size Test');
}

Popup.html

<div id="content"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    displaySize('window', $(window));
    displaySize('document', $(document));
    displaySize('#spreadsheet-container', $('#spreadsheet-container'));
  });

  function displaySize(name, elem) {
    $('#content').append('<p>' + name + ' width: ' + elem.width() + '</p>');
  }
</script>

How can I access the actual browser window size from within this Google Sheets modal environment?

2

The window.screen approach works but gives you the full screen resolution including taskbars and other UI elements. You want the browser viewport size through window.parent instead. I ran into this same issue building responsive Google Sheets addons. Use window.parent.innerWidth and window.parent.innerHeight in your popup script. These give you the parent browser window dimensions, not just the modal container. You need to access the parent window object since your modal’s running in an iframe context. In your displaySize function, try adding displaySize('parent window', {width: function() { return window.parent.innerWidth; }, height: function() { return window.parent.innerHeight; }}); to test this. This method’s worked reliably for me across different browsers and screen sizes with Google Workspace modal dialogs.

3

try window.screen.width and window.screen.height instead - they’ll give you the actual screen dimensions even from inside the modal. worked for me with similar sheet popups.

4

I’ve hit this same issue. Both solutions mentioned have problems - the screen object gives monitor size (not what you want), and window.parent gets blocked by iframe security policies. Here’s what actually worked: capture the browser dimensions from the main Google Sheets context before opening the modal. Don’t try getting parent window size from inside the iframe. In your main.gs file, inject window size as a parameter when creating the HTML output. Add a script that grabs window.innerWidth and window.innerHeight from the main sheet context, then pass these to your modal through HtmlService template variables or data attributes. This skips the iframe restrictions completely since you’re getting dimensions from the right scope before the modal opens.