Remove scroll bar from iframe, Show iframe without a vertical scroll bar Options

[CharlesEF]

Hi All,

Ok, what is the trick to removing the scroll bar from an iframe. HTML5 specs state that CSS should be used but 'overflow: hidden;' has no effect. The only thing that does work is 'scrolling="no"' but HTML5 doesn't support it. The container that holds the iframe is big enough and the scroll bar should not appear but it does.

Does this mean I have to use HTML4 instead of HTML5?


Thanks for any help,

Charles

[Christian J]

This works in my browsers:

CODE

iframe {
height: 300px;
width: 500px;
overflow: hidden;
border: 0;
}

<iframe src="http://example.org"></iframe>

If you increase text size, the framed content will of course need more space. Also make sure the scrollbars are from the iframe itself, and not from the parent page (or element) because the iframe is too large.

[pandy]

This works in my browsers:

CODE

iframe {
height: 300px;
width: 500px;
overflow: hidden;
border: 0;
}

Actually, that doesn't work for me. Not with any page loaded in an iframe. Odd, I seem to recall this used to be possible with CSS?

Charles, try to add the following to the CSS for db_tests.php . That ought to work.

CODE

body   { overflow: hidden }

[Christian J]

Charles, try to add the following to the CSS for db_tests.php . That ought to work.

CODE

body   { overflow: hidden }

MSIE used to display a default scrollbar track for all pages (not just iframes) that you had to remove, is that the cause here? But I never got it in my other browsers (and not MSIE11/Win10 either now).

[pandy]

Charles, try to add the following to the CSS for db_tests.php . That ought to work.

CODE

body   { overflow: hidden }

MSIE used to display a default scrollbar track for all pages (not just iframes) that you had to remove, is that the cause here? But I never got it in my other browsers (and not MSIE11/Win10 either now).

Got it in all browsers I tried. FF, Iron, Edge and even K-Mel that's pretty dated now. I tried locally with just an three iframes in a page and loaded Charles' page in one and a long and a short local page in the others. It worked only if the page was small enough to fit, but then it would work without anything extra.

What's an even greater mystery is that today it works in all the browsers I mentioned. I get that Charles has modified his page, but I also have another really long local page in another iframe. I haven't changed a character in the test page. What's even more mysterious is that I don't get scrollbars even if I remove the CSS, i.e. just have the iframe tag with no attributes more than src. My Win10 is still majorly screwed up, but I don't understand how that could cause this. It can't be caching in all browsers. I added some text and it shows up.

[pandy]

Ah! I had of course added overflow: hidden to BODY in the long test page. What can I say? I'm stupid.