1

I know this question has been asked a lot before but the problem is that I'm trying to build a responsive tool with html, css, Jquery. I'm using an iframe to display the html (example: a landing page) a see the different responsive views, but when the content is higher that the window the scroll bar appears (horizontal, vertical bar), I would like to dissapear at least the horizontal bar, because if I have a responsive view of 320px, when scrollbar appears it hides part of the content and I have to use the horizontal scroll.

I tried different codes no one worked. So could you please help me. Thanks!

<div id="resize-box">
                <iframe src="blank.html" frameborder=0 scrolling="no"></iframe>
</div>

If I use "scrolling no" it hides the scroll bar but the functionally stops working and I'll need it.

I tried this but no lucky. Hide horizontal scrollbar on an iframe?

Community
  • 1
  • 1
marianocodes
  • 794
  • 1
  • 10
  • 19
  • Have you verified the scrollbar is on the iframe and not on the div or some other parent element? Please, put quotes around your attributes (`frameborder="0"`). – Erik Philips Apr 21 '14 at 21:59
  • I just added the quotes thanks! I verified I think is the iframe because if I add it scrolling="no" scrollbars disappears but also the functionality – marianocodes Apr 21 '14 at 22:10

2 Answers2

0

Edit blank.html like >

<html>
<head>
    <style>
    html, body {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    #bla {
        position: absolute;
        left: 0;
        top: 0;
        right: -30px;
        bottom: 0;  
        padding-right: 15px;
        overflow-y: scroll;
    }
    </style>
</head>
<body>
    <div id="bla">
         <!-- lines here -->
    </div>
</body>

And now <iframe src="blank.html" />

As you see, scrollbar is hidden but still scrollable.

Funk
  • 73
  • 5
0

Bro... use one line of css...

#resize-box iframe { overflow-y: auto }

This basically makes the iframe have a scroll bar if (and only if) the content is taller than the height of the div.

Just make sure that your div with id 'resize-box' has a set height e.g.

#resize-box { height: 900px }
Abimbola Esuruoso
  • 3,955
  • 1
  • 19
  • 25
  • Thanks for your help. But I think you didn't get what I need. When I make the resize of the div I get a horizontal scroll bar,. Ex. I make a resize 320px, the vertical scrollbar takes some space and content and the horizontal scrollbar show up. Obviously I need the scrollbar or at least the functionality because if the content is higher I need to scroll down – marianocodes Apr 22 '14 at 22:04