Results 1 to 5 of 5

Thread: How to remove the iFrame scrollbars

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default How to remove the iFrame scrollbars

    Hi,

    I wonder why the following iFrame has scrollbars:

    Code:
    <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

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    There is an extra iframe on this page
    https://docs.google.com/spreadsheet/...e&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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    html, body {
    overflow: hidden;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there Rain Lover,

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

    So...
    Code:
    <iframe width='800' height='254'...
    ...instead of...
    Code:
    <iframe width='600' height='200'...
    coothead

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by coothead View Post
    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.
    Last edited by jscheuer1; 09-04-2011 at 02:16 AM. Reason: Or you could use . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •