I’m stuck with a Google Docs add-on project. I’m trying to make a custom sidebar but can’t change how wide it is. The sidebar always stays 300 pixels wide no matter what I do.
Here’s what I’ve tried:
function openMenu(e) {
DocumentApp.getUi()
.createAddonMenu()
.addItem('Open sidebar', 'displaySidebar')
.addToUi();
}
function displaySidebar() {
var content = HtmlService.createHtmlOutput('<p>Greetings!</p>')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Sidebar Width Test')
.setWidth(400); // This doesn't seem to work
DocumentApp.getUi().showSidebar(content);
}
I’ve tried different width values but nothing changes. The sidebar stays stuck at 300px wide. Any ideas on how to fix this? I haven’t published the add-on as a web app yet, if that matters.
I’ve run into this exact issue before, and it’s definitely frustrating. Unfortunately, Google has locked the sidebar width at 300px for all add-ons. It’s not just you - this is how it works for everyone now.
One workaround I’ve found effective is using a custom dialog instead of a sidebar. You can set whatever width you want for dialogs. Here’s a quick example:
function showCustomDialog() {
var html = HtmlService.createHtmlOutput('<p>Your content here</p>')
.setWidth(400)
.setHeight(300);
DocumentApp.getUi().showModalDialog(html, 'My Wider Interface');
}
This gives you more screen real estate to work with. The downside is it’s not persistent like a sidebar, but for many use cases, it’s a good alternative. Just something to consider if the 300px width is really limiting for your add-on’s functionality.
hey there, i feel ur pain with the sidebar thing. google’s been real stubborn bout that 300px width lately. have u considered makin ur interface more vertical? could squeeze more stuff in that way. or maybe break it into multiple sections u can toggle between? just spitballin ideas here. good luck man!
I’ve encountered this limitation as well, and it’s indeed frustrating. Google has standardized the sidebar width to 300px for all add-ons, and there’s no direct way to change it. However, you might consider restructuring your UI to work within these constraints. One approach is to use accordions or collapsible sections to organize your content vertically. This way, you can fit more functionality without sacrificing usability. Another option is to create a multi-page interface within the sidebar, allowing users to navigate between different sections. While not ideal, these workarounds can help you maximize the available space and still deliver a good user experience within Google’s limitations.