[ARCHIVED] Scrollbars in iFrames - How to remove

[Miles_Batten]

I am an ID student who is creating a course in Canvas for school.

I'm having trouble removing horizontal and vertical scrollbars from Google Forms surveys as well as embedded video. Some of my course pages have this ugly double scrollbar look that makes them clunky to interact with.

I've tried inserting 'scrolling="no"' into my iFrame's code to no avail. I would try to style the iFrame using CSS, but I'm not seeing the option to link a style sheet in my course settings. I'm using a free Canvas account, so I suspect this may be an option that is only available to paying or enterprise scale users.

Any advice would be appreciated.

Thanks in advance.

[Miles_Batten · Accepted solution]

For anyone who is struggling with this issue, I have come up with a workaround on how to remove scrollbars from iFrames. 

1. Go to the page where you'll be adding the iFrame.

2. Edit/View HTML Editor

3. Add the following code at the very top of the page:

<style>

iframe {overflow:hidden}

</style>

This will not show in your page content. And if you have to edit the page it will have to be added again.

4. Add the following code to the iFrame right before the closing tag: 

scrolling="no"

Linking an external style sheet with this code would probably work best. But if you're using a free Canvas account that will not allow you to link style sheets, or you are unable to access your LMS's style sheet, give this a shot. So far, this has worked for embedded HTML5 video and Google Forms. No more ugly double scrollbars!

[demellon]

Canvas removes styles from pages and some tags from iFrames.  Including the scrolling tag.