Disabling the iframe overflow:auto; on a Google Apps Script Web App

Question

When creating an apps script web app, I constantly have a vertical scroll bar on the right hand side that is not representative of the pages size and doe snot move when scrolling.

The web app runs inside an iframe, which had an id of userHtmlFrame with overflow-y: scroll; set on it. This causes a scrollbar to always be present whether the page needs to scroll or not. If the page doesn't need to scroll, then it hides content on the right side as seen here:

If the page does need to scroll, it will hide the scrollbar that is supposed to be there.

If I add the appropriate CSS, it does not work. It looks like I cannot change the styling on the iframe from within it.

Is there a way to change the styling on the iframe, or some other property when generating the HTML in apps script to disable the scrolling?

Answer 1

I had to open up the developer console and uncheck css styles one at a time till I found the ones that were not compatible. I was using the materialize.css framework, and had add the following overrides to remove the extra scrollbar.

<!-- This will fix the scroolbar caused by materialze.css --> 
  <style> 
   [class] {
           will-change: unset;
          -webkit-backface-visibility: visible;
        /*  backface-visibility: visible; */
          }
   [type="checkbox"]:checked + label:before {
          -webkit-backface-visibility: visible;
          backface-visibility: visible;
         }
   </style>