Dreaded iframe horizontal scroll bar can't be removed in IE?

StackOverflow https://stackoverflow.com/questions/67354

  •  09-06-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution 

scrolling="yes"  horizontalscrolling="no" verticalscrolling="yes"

Put that in your iFrame tag.

You don't need to mess around with trying to format this in CSS.

OTHER TIPS

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.

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>

<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.

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>

You can also try setting the width of the body of the page that's included inside the iframe to 99%.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top