How to remove horizontal scrollbar for iframe on Google Chrome

Question

I want to have vertical scroll and horizontal scroll.

using scroll = no is not what I want, since I still want vertical scroll.

I tried adding this to css

#myiframe{ overflow-x:hidden; overflow-y:auto; } 

but it still shows a horizontal scrollbar only for chrome. other browsers are fine.

any help is appreciated

Answer 1

If you have access to the original iframe page, you can post

 body { overflow-x:hidden; } 

inside this page. If you do not, but at least a page from the same domain, I believe something like this from the parent page should work:

 #myiframe body { overflow-x:hidden; } 

If none of the above is true - you can simulate "overflow-x: hidden", actually hiding the horizontal scroll bar inside the iframe container. Place an Iframe in a smaller DIV container, for example:

 <div id="myiframecontainer"> <iframe id="myiframe" src="http://en.wikipedia.org" /> </div> #myiframecontainer { width:600px; height:400px; overflow:hidden; } #myiframe { width:100%; height:420px; } 

Since the height of the iframe is greater than the height of the div, and the div overflow is hidden, the horizontal iframe scroll bar will be hidden. Vertical still remains operational.

Demo: http://jsfiddle.net/5DPgf/