How to remove the iFrame scrollbars

[Rain Lover]

Hi,

I wonder why the following iFrame has scrollbars:


<iframe width='600' height='200' frameborder='0' scrolling='no' src='https://docs.google.com/spreadsheet/pub?hl=en_US&key=0Aliqp0kGPjWsdERacHFDVzNzb1N3RHREZzYwVGQ5OVE&output=html&widget=true&chrome=false'></iframe>

Thanks in advance!
Mike

[azoomer]

There is an extra iframe on this page
https://docs.google.com/spreadsheet/pub?hl=en_US&key=0Aliqp0kGPjWsdERacHFDVzNzb1N3RHREZzYwVGQ5OVE&output=html&widget=true&chrome=false

It is not obvious, but it is in the content div, and it must be created by the javascript on the page. Unfortunately I don't know how to get around that.

[jscheuer1]

Because the scrollbars attribute for iframe is deprecated and because you have no control over the css style of the page in the iframe. In order for that page to have no scrollbars (regardless of whether it's in an iframe or not), it (the page, not the iframe) would need the following style for the html and body elements, and depending upon the layout, perhaps other elements would need to be included:


html, body {
overflow: hidden;
}

[coothead]

Hi there Rain Lover,

if you don't want scrollbars then you will have to change the iframe width and height attributes. ;)

So...

<iframe width='800' height='254'...
...instead of...

<iframe width='600' height='200'...
coothead

[jscheuer1]

if you don't want scrollbars then you will have to change the iframe width and height attributes.

Nice catch, coothead. That would work, sorry I left that out. I had been thinking about it. But forgot after testing some other ideas, and of course you would no longer be able to use the dimensions you had originally chosen. If you need those, then you need to be able to change the style on the page in the iframe.

Or you could use two pages with iframe, making three pages in all. The top (first) page would have an iframe of the desired dimensions its src would be - The middle (second) page, on the same domain as the top page, which would have an iframe of the required dimensions to show the remote (third in this scenario) page with no scrollbars. The middle page would have the required overflow styles to prevent the top page's iframe from having scrollbars and could also have code on it to allow horizontal scrolling of it from buttons on it or on the top page.