I have an iframe. The content is wider than the width I am setting so the iframe gets a horizontal scroll bar. I can't increase the width of the iframe so I want to just remove the scroll bar. I tried setting the scroll property to "no" but that kills both scroll bars and I want the vertical one. I tried setting overflow-x to "hidden" and that killed the horizontal scroll bar in ff but not in IE. sad for me.
+4
A:
You could try putting the iframe inside a div and then use the div for the scrolling. You can control the scrolling on the div in IE without issues, IE only really has problems with iframe scrolling. Here's a quick example that should do the trick.
<html>
<head>
<title>iframe test</title>
<style>
#aTest {
width: 120px;
height: 50px;
padding: 0;
border: inset 1px #000;
overflow: auto;
}
#aTest iframe {
width: 100px;
height: 1000px;
border: none;
}
</style>
</head>
<body>
<div id="aTest">
<iframe src="whatever.html" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>
Rich Adams
2008-09-15 22:17:36
Thank you for this solution. The only problem is that you have to define a fixed height for the iframe content, which in my case will vary. I am going to use this and will have to specify an extra large height for the iframe which is kinda hacky. But thanks a lot this got me there.
mrjrdnthms
2008-09-16 17:55:20
+5
A:
The scrollbar isn't a property of the <iframe>, it's a property of the page that it contains. Try putting overflow-x: hidden on the <html> element of the inner page.
Jim
2008-09-15 22:18:30
A:
<iframe style="overflow:hidden;" src="about:blank"/>
should work in IE. IE6 had issues supporting overflow-x and overflow-y.
One other thing to note is that IE's border on the iframe can only be removed if you set the "frameborder" attribute in camelCase.
<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/>
it would be nice if you could style it properly with CSS but it doesn't work in IE.
scunliffe
2008-09-16 00:52:59
In my case I want to remove the x scroll bar but not he y and I believe setting the overflow hidden will remove both. Do I have that correct?
mrjrdnthms
2008-09-16 17:03:35
+4
A:
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes"
Put that in your iFrame tag. That will fix the problem. Promise.
U don't need to stuff around with trying to format this in CSS.
zOMG. While the horizontalscrolling and verticalscrolling attributes appear totally undocumented on MSDN this worked to solve my IE 6 problem.
Simon Lieschke
2009-08-18 03:11:21
-1 for multiple reasons; primarily, this should have been a comment, it's impossible to tell which post you're referring to (people can sort answers in different orders)
Lord Torgamus
2010-01-29 22:59:05
@JJJ: in the future, you should add things like this as comments to the original answer, not separate answers.
Lord Torgamus
2010-01-29 22:57:16
A:
All of these solutions didn't work for me or were not satisfactory. With the scrollable DIV you could make the horizontal scrollbar go away, but you'd always have the vertical one then.
So, for my site where I can be sure to control the fixed height of all iframes, this following solution works very well. It simply hides the horizontal scrollbar with a DIV :)
<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes -->
<!--[if IE]>
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;">
</div>
<![endif]-->
<script type="text/javascript">
if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null)
{
document.getElementById("ieIframeHorScrollbarHider").style.display = "block";
}
</script>
Lou
2010-01-29 22:53:49
A:
You can also try setting the width of the body of the page that's included inside the iframe to 99%.
red tiger
2010-06-09 19:39:35