I need help with sizing a modal popup in my Google Sheets extension. I want to create a dialog that scales based on how big the user’s Google Sheets window is.
Right now I’m using fixed sizes for my modal, but this doesn’t work well for different screen sizes. My add-on runs from a sidebar, and I can’t get the parent window size because of security restrictions between frames.
Does anyone know a method to detect the main Google Sheets window dimensions so I can make my dialog responsive? I want to set the width and height as percentages of the main interface rather than hardcoded pixel values.
Hit the same problem with my add-on. Here’s what worked: skip trying to detect the Sheets viewport directly. Use responsive CSS and JavaScript inside the HTML dialog instead. Set up CSS media queries for different breakpoints, then grab document.documentElement.clientWidth in your popup script to adjust content on the fly. I cap my dialogs at 80% of screen space using Math.min() with client dimensions. This bypasses the cross-frame restrictions since everything runs in the dialog’s context. Not perfect, but way more reliable than fighting Google’s security model.
You’re encountering issues resizing a modal popup in your Google Sheets add-on. The popup size doesn’t adapt to different screen resolutions because you’re using fixed pixel dimensions. Directly accessing the Google Sheets window dimensions from the add-on’s sidebar is restricted for security reasons. You need a solution to create a responsive dialog that scales proportionally to the main Google Sheets window size.
Understanding the “Why” (The Root Cause):
Google Sheets’ security model prevents direct access to the parent window’s dimensions from an embedded iframe (like your add-on sidebar). This is a crucial security feature to protect user data. Therefore, attempting to directly obtain the Sheets window size within your add-on’s script is blocked. The solution involves shifting the sizing logic to the client-side (within the HTML of your popup) to bypass this cross-frame restriction.
Step-by-Step Guide:
Initial Modal Size: Initialize your modal popup with a small, default size in your Apps Script code. This will serve as a placeholder until we resize it using client-side JavaScript.
Client-Side Resizing: Modify your HTML file (popup.html) to include JavaScript code that captures the available screen width and height. Then, use this information to resize the modal.
Here’s an example:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="myPopup">
<!-- Your popup content here -->
</div>
<script>
const popup = document.getElementById('myPopup');
const screenWidth = screen.availWidth;
const screenHeight = screen.availHeight;
const maxWidth = screenWidth * 0.8; // Cap width at 80% of screen
const maxHeight = screenHeight * 0.8; // Cap height at 80% of screen
popup.style.width = Math.min(maxWidth, 400) + 'px'; // Use min to prevent excessive size
popup.style.height = Math.min(maxHeight, 400) + 'px'; // Maintain minimum of 400px if needed
</script>
</body>
</html>
Apps Script Update (Minimal): Your Apps Script code needs minimal changes. The key is to start with a small, default size that won’t look awkward before the JavaScript kicks in.
function displayPopup(popupTitle) {
const userInterface = SpreadsheetApp.getUi();
const popup = HtmlService.createHtmlOutputFromFile('popup')
.setWidth(100) // Small initial width
.setHeight(100); // Small initial height
userInterface.showModalDialog(popup, popupTitle);
}
Common Pitfalls & What to Check Next:
HTML Structure: Ensure your popup.html has a div (or other element) with the id="myPopup" to target for resizing.
JavaScript Placement: Make sure the JavaScript code is placed within <script> tags in your popup.htmlafter the myPopup element is defined.
Browser Compatibility: Test thoroughly across different browsers to ensure consistent resizing. Modern browsers generally handle screen.availWidth and screen.availHeight reliably.
Content Overflow: If your popup content is larger than the calculated dimensions, it might overflow. Use CSS to handle this, perhaps using overflow: auto; or other overflow properties on #myPopup.
Alternative Sizing Strategies: If 80% of screen space isn’t suitable, adjust the multipliers (e.g., 0.7, 0.9) to control the maximum size of your popup.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
you can’t directly grab the viewport size from sheets. but if you tweak your popup HTML to use window.innerWidth and window.innerHeight, it will adjust automatically. it’s not a flawless fix, but it’ll help! hope this helps!
Honestly, why overcomplicate this with viewport detection and CSS media queries? All that manual stuff just creates more problems - like flickering dialogs.
I ditched the in-sheet approach entirely for similar UI issues. Built an automation that watches user interactions and handles modal sizing automatically. It grabs screen dimensions, user preferences, even usage patterns to pick the right dialog size.
The automation runs separately and sends perfect dimensions to your Sheets extension via API. No more JavaScript hacks or cross-frame headaches. Modals just pop up at the right size.
Bonus: you can A/B test different sizes and auto-optimize based on engagement. Way cleaner than patching workarounds.
Latenode makes this dead simple. Build the whole sizing system visually and hook it to your extension without wrestling with complex code.
Understanding the “Why” (The Root Cause):
Step-by-Step Guide:
Common Pitfalls & What to Check Next:
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!