I have an iframe for which I would like to enable a horizontal scroll bar, but disable the vertical scroll bar.
I have the iframe styled as such: overflow-y:hidden; overflow-x:auto;
This works just fine in FireFox, but not Chrome. Is there any sort of workaround to get this to work in Chrome?
Update: I have transitioned into using a table cell with overflow, rather than an iframe. I don't know if this will make it easier or harder to work around that vertical scroll.
The answer is actually here:
Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Good luck!!
This works well in any browser
<!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: 100%;
height: 100%;
border: none; }
#test {
width: 100%;
height: 3530px;
padding: 0;
overflow: hidden; }
</style>
<body style="margin:0;">
<div id="test">
<iframe src="http://stackoverflow.com/" scrolling="no">
</iframe>
</div>
</body>
</html>
Add parent div element to iframe like this:
<div style='overflow: hidden; width: 600px; height: 400px;'>
<iframe src='http://www.website.com/index.html' style='overflow-y: hidden;' width='580' height='400' frameborder='0' seamless='seamless'></iframe>
</div>
It will hide vertical scroll bar but user could still use 'page up', 'page down' and arrow keys options for vertical scrolling.
If you cant find anything else:
Put the height of the iframe to =>103%
See here:
http://forums.aspfree.com/web-layout-43/horizontal-scrollbar-iframe-removing-23237-2.html
It is workaround that might just work...
You tell me!
Good luck
