Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS iframe scrollbars

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #242326
    zaahideen
    Participant

    i have placed an <b>iframe</b> on my website. for some reason scrollbars are appearing on it, even though i have set the height and width of the iframe to 100%

    also i have tried using the “overflow: hidden;” attribute but NO luck

    please help…

    http://utechproducts.co.uk/

    scroll to the footer and <b>Subscribe Now</b> part is the iframe

    #242327
    Shikkediel
    Participant

    I’ve been messing with this a lot before as well. Seems the only working approaches are an inline scrolling="no" (although this isn’t really correct) or, as I found is not officially supported but working in all desktop browsers nonetheless, adding a seemless attribute to it.

    Edit – cr*p, looks like it was removed from the current spec.

    #242332
    I.m.learning
    Participant

    Until my computer is fixed, I am bored as heck.

    I copied the OP’s code and pasted on my local environment. I removed the link to their CSS, nothing really changed.

    The code looks like Bootstrap. When I used frames I used:

    <iframe class="embed-responsive-item" src=" Your source here"></iframe>

    I think the only way to remove the scrolls, without any hacks is to make the frame larger

    But I looked at the CSS and is curious about using

    div.column...iframe...
    

    When I changed my iframe, I never set a width/height inline; I just set the style in the sheet iteself. Iframe is the same as html, body, p, h1, etc.
    My style is

    iframe{width:80%!important;height:1000px;}
    

    However, I do use 2 of them and add an id and style them for @media inquiries:

    /* when reaching to tablet size, change to:*/
    @media screen and (max-width: 990px){
    #iframe1{margin-left:-70px!important;width:600px!important;}
    #iframe2{margin-left:-30px!important;width:460px!important;}
    }
    
    #242337
    I.m.learning
    Participant

    I don’t know why; but this damn thing keeps removing part of my code. I even tried using the lt and gt escapes and it still removes it

    div class=”embed-responsive embed-responsive-4by3″

    iframe class=”embed-responsive-item” src=”your source here”

    #242344
    Shikkediel
    Participant

    I think I found the culprit, disregard my earlier post. Just doing a p {margin: 0} for the page in the iframe should do the trick.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.