[RESOLVED] Preventing horizontal scrollbar in iframe

hadoob024

I've looked all over the web for solutions to this problem, but none of them seem to work properly. Either all the suggestions I saw were from 2005 and before and aren't applicable now (or are broken now with the latest browser updates), or they require making changes to the iframe source code (which I don't have access to).

So anyway, is there a way to disable only the horizontal scrollbar in an iframe if you can't modify the source code of the iframe itself? I went with the:

<iframe 
style = "overflow-x:hidden;overflow-y:scroll;"
src = "blahblah.html">
</iframe>

This works perfectly in firefox, but doesn't in any other browser. Any suggestions?

ednark

you could try setting the frame html to scrolling="no", wrapping the frame in a div, and set scrolling on the div. This should give you the same effect as if you has scrolling on the iframe itself.

<div style="overflow:hidden; overflow-y:scroll; height:100px; width:100px;">
<iframe frameborder="1" scrolling="no" src="http://www.google.com">iframe not supported!</iframe>
</div>

hadoob024

Weird. I just tried that, and it works in Safari and Opera, but not in Firefox or IE! In Firefox and IE, scrolling is disabled period, whereas in Opera and Safari, the horizontal scrolling is disabled, but vertical scrolling works (which is what I want). Strange, huh?!?

ednark

hmmm... I just tested that in IE6/7, Safari WIN, and FF2. Worked in everything but Opera.

hadoob024

Really? Hmmm... Now I'm confused. Here's my code:

<div style="overflow-x:hidden; overflow-y:scroll;">
<iframe 
frameborder = 0
width = "690"
height = "550"
align = "middle"
scrolling = "no"
src = "' || tmp_link || '">
</iframe>
</div>

I tried it in Firefox 2.0.0.14, IE 7.0.6000.16643, Opera 9.25, and Safari 3.0.4, and it only works for me in Safari and Opera. I don't see a scrollbar in either one, but the scrolling action itself works. But in Firefox and IE, I see a scrollbar, but it doesn't scroll. I wonder if it's Oracle's APEX environment that's somehow screwing around with the rendering, maybe?

hadoob024

Just tried it on a colleague's computer and got the same results. We're both running Vista. Could that be doing something? Or is it more likely the Oracle APEX environment?

I just tested it again outside the APEX environment. Just created a random HTML file with the IFRAME code in it, and I'm still getting the same behavior with scrolling working properly in Opera and Safari, but not in IE or Firefox. I'm at a complete loss as to why this is happening.

NogDog

This seems to work in both FF2 and IE7. The one drawback is that you have to guesstimate a height value for the iframe sufficient to contain all the content:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled 1</title>
</head>
<style type="text/css">
#test iframe {
   width: 800px;
   height: 4000px;
   border: none;
}
#test {
   width: 820px;
   height: 500px;
   padding: 0;
   border: inset 1px gray;
   overflow: auto;
}
</style>
<body>
<div id="test">
<iframe src="http://phpbuilder.com/board/showthread.php?t=10354010"
scrolling="no"></iframe>
</div>
</body>
</html>

hadoob024

Does ednark's suggestion work for you too? I'm trying to figure out why this isn't working on my end. Well, at home now, but I'll give your suggestion a shot tomorrow at work and let you know how it goes!

hadoob024

Sweet!!! Just tested out your suggestion and it works perfectly. Yeah, I played around with the heights/widths settings to make it look better, but it works now. No horizontal scroll, just the vertical one. Thanks a ton!