Jump to content

Preventing horizontal scrollbar in iframe


hadoob024

Recommended Posts

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?

Correct me if I'm wrong, but I think overflow-x and overflow-y is not in CSS2 standards. This will be supported in CSS3, so older browsers may not support it.

 

W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.

 

Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE 7 (and below.)

 

http://www.brunildo.org/test/Overflowxy2.html

Hmmm, I wonder.  Yeah, I put the style info directly in the IFRAME tag itself.  Some people said to try putting the style info in the source of the iframe, but that's not a possibility.  And if I put the style info in the BODY tag, then it removes the horizontal scrolling for the main window, and not the iframe part (which is what I wanted).  I guess I'll just have to stick with hard coding in values for width/height.

 

 

Someone suggested this to me which works perfectly, so I'm posting his solution here for everyone:

 

<!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://blahblahblah.html" scrolling="no">
</iframe> 
</div> 
</body> 
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.