Using Userscript to Remove Element: Google Docs Panel Button

Other Questions Google docs
1

I’m trying to remove a specific element from Google Docs using a userscript. There’s this annoying button that makes the document appear off-center because it reserves space for some side panel functionality. When I use developer tools to inspect the element, I can see it has the ID side-panel-toggle-wrapper. I can temporarily hide it by setting display: none in the CSS, but this gets reset every time I refresh the page. Is there a way to create a userscript that will automatically hide this side-panel-toggle-wrapper element permanently? I want the document to be properly centered without this UI element taking up space.

2

add a setInterval function to your userscript that checks every few seconds if the element exists and hides it again. I use setInterval(() => { const elem = document.getElementById('side-panel-toggle-wrapper'); if(elem) elem.style.display = 'none'; }, 2000); and it works reliably for similar Google Apps issues.

3

You can address this issue by creating a userscript that employs a MutationObserver, which allows you to monitor changes in the DOM. This is essential as Google Docs dynamically modifies its elements. Inside your userscript, ensure you include a function that sets the display property of the side-panel-toggle-wrapper element to none right after the page loads and while observing the DOM for any further changes. It might also help to make your CSS rule use !important to ensure the style persists. Remember that the userscript should specifically target the Google Docs domain.

4

Here’s another approach that’s worked better for me - inject custom CSS straight into the page head instead of messing with individual elements. Way more stable for changes that need to stick around in Google Docs. Just create a userscript that drops a style element with #side-panel-toggle-wrapper { display: none !important; } into the document head when the page loads. You don’t need to constantly watch the DOM since the CSS rule kicks in automatically whenever that element shows up. Uses way less processing power than observers or intervals, and the !important makes sure it overrides whatever inline styles Google Docs throws at it.