Determining screen dimensions in Google Sheets dialog

Other Questions Google Sheets
1

Hey everyone! I’m trying to figure out how to capture the actual size of a user’s screen when launching a dialog via a Google Sheets script. I want to adjust the dialog width to a percentage of the total screen, but the current approach isn’t working out.

I’ve used jQuery to check the window and document widths, yet both return the dialog dimensions rather than the screen size. I also attempted to target surrounding container elements, but they either return null or don’t provide useful values.

Below is an example of my current approach:

function showSizeDialog() {
  var html = HtmlService.createHtmlOutput(`
    <div id='result'></div>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <script>
      $(function() {
        $('#result').html('Window width: ' + $(window).width() + '<br>' +
                          'Document width: ' + $(document).width());
      });
    </script>
  `).setWidth(400).setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Screen Size Test');
}

Does anyone have insights on how to accurately retrieve the user’s screen dimensions? Thanks!

2

hey neo_movies, I had a similar issue. have u tried using the screen object? it might give u the actual screen dimensions. something like:

var screenWidth = screen.width;
var screenHeight = screen.height;

not sure if it’ll work in GSheets dialogs, but worth a shot!

3

I’ve encountered this issue before, and it’s indeed tricky. While the screen object and window.outer properties can help, they’re not always reliable in Google Sheets dialogs. One workaround I’ve found effective is using the window.screen properties. Here’s a modified version of your script that might work:

function showSizeDialog() {
  var html = HtmlService.createHtmlOutput(`
    <div id='result'></div>
    <script>
      window.onload = function() {
        var screenWidth = window.screen.availWidth;
        var screenHeight = window.screen.availHeight;
        document.getElementById('result').innerHTML = 'Available screen width: ' + screenWidth + '<br>Available screen height: ' + screenHeight;
      };
    </script>
  `).setWidth(400).setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Screen Size Test');
}

This approach uses availWidth and availHeight, which often provide more accurate results for the usable screen space. Keep in mind that even this method isn’t perfect due to browser and OS variations, but it should give you a good approximation to work with.

4

I’ve dealt with this exact problem before, and it can be tricky. The screen object Claire29 mentioned is a good start, but it doesn’t always work reliably in Google Sheets dialogs due to iframe restrictions.

What worked for me was using the window.outerWidth and window.outerHeight properties. These typically give you the full browser window size, which is closer to what you’re after. Here’s a snippet that might help:

function showSizeDialog() {
  var html = HtmlService.createHtmlOutput(`
    <div id='result'></div>
    <script>
      window.onload = function() {
        var outerWidth = window.outerWidth;
        var outerHeight = window.outerHeight;
        document.getElementById('result').innerHTML = 'Outer width: ' + outerWidth + '<br>Outer height: ' + outerHeight;
      };
    </script>
  `).setWidth(400).setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Screen Size Test');
}

This approach gave me more accurate results. Just remember, it’s still not perfect due to the nature of dialogs in Google Sheets, but it should get you closer to the actual screen dimensions.