Hey I'm building a webpage that contains an iFrame in all other browsers it appears fine but when testing in ie7 I get a vertical and horizontal scrollbar, is there anyway to remove this?
<div id="converter3"><iframe src="https://postoffice.travelmoneyonline.co.uk/widget/(S(lwtb0t45hyhwv2z5sarusa45))/default.aspx
" frameborder="0" allowtransparency="true" scrollbars="no" style="height:279px; overflow:hidden;"></iframe></div>
#converter3{
float:right;
width:218px;
margin-right:12px;
margin-top:20px;
}
Thanks
Try appling these:
overflow: hidden; in CSS style for the <iframe>
scrollbars="no" as <iframe> attribute
So:
<iframe scrollbars="no" style="overflow: hidden;" ... >
Related
I am developing an ordering food widget for a restaurant website(Please see the attached picture below). I use iframe to display menus with scroll abled. And i have hide the scroll bar in css. But it is strange that there is a bar displayed on the right hand side and I have no idea that it is. Also, this bar appears only in Windows chrome, not in Mac chrome on safari.
To remove frame border use the below one.
<iframe src="myURL" width="500" height="500" frameBorder="0">Browser not compatible.</iframe>
Try this scrolling="no" or seamless="seamless".
<iframe src="..."
class="foo"
scrolling="no"
seamless="seamless">
</iframe>
The only Draw Back here is you have to use a Div Container outside the IFrame.
Tested in android and ios Device.
HTML
<div class="outerCon">
<iframe src="https://bing.com"
class="foo"
seamless="seamless">
</iframe>
</div>
CSS
.outerCon{
overflow:hidden;
height:500px;
width:600px;
}
.outerCon iframe{
width:inherit;
height:inherit:
overflow-x : hidden;
overflow-y: scroll;
}
.outerCon iframe::-webkit-scrollbar {
display: none;
}
DEMO
1.sencha touch 2.3.1
2.I Used iframe it works well on IOS7.x
3.When Upgrade to IOS8.1，Iframe can't scrolling
4.IOS8.1 in safari works well,but when send to home screen,and open it it can't work.
WHY?is a bug?
my iframe code like this:
<div style="-webkit-overflow-scrolling:touch;background:url(resources/images/loading.gif) center center no-repeat; height:500px; overflow: auto;">
<iframe src="/abc.html" width="100%" height="100%" frameborder="0" >
</iframe>
</div>
Try to set fixed height. Does it work?
Also, try to add:
overflow-y: scroll;
to your frame.
Its a known issue with 8.1. I am going through the same. Surprisingly, iframe scroll works fine in chrome but Safari has issues.
http://www.applevis.com/blog/apple-ios-news/accessibility-fixes-and-improvements-ios-81
I have an iframe and I need the scrollbars to be present even when content fits inside the iframe. so used overflow:scroll property . which works fine for FF, IE but not in chrome.
#iframeid
{
height:500; width:1150
}
#iframeid::-webkit-scrollbar
{
width: 12px;
overflow-x:scroll;
overflow-y:scroll;
}
this totally removes the scrollbars. Any thing I am missing ?
Use scrolling attribute in iframe..
<iframe width="150" height="150" scrolling="yes/no/auto"></iframe>
All the CSS you need:
#iframeid{
height:500; width:1150
overflow:scroll;
}
Works for me in Chrome:
http://jsfiddle.net/ukcG9/6/
How do I only scroll within the iFrame, but not the whole window? I want to have text underneath the iFrame, but it's showing up when the text is longer than the iFrame. You can go to www.thesocialscreensaver.com to see what I'm talking about. Thanks!
You can use your iframe in a div, like this :
<div id="iframeINSIDE" style="width: 600px; height: 200px; overflow: hidden;">
<iframe name="abc" style="width: 620px; height: 200px;" src="File.html"></iframe>
I have checked it on Firefox and IE and works fine for both of them.You'll be able to scroll using your mousewheel and by dragging mouse pointer over the div as well.This will scroll only the iframe not whole window.
Check if it works for you.
Newly added: http://jsfiddle.net/TJZT4/10/
To make iframe 100% of webpage, use:
<body>
<iframe src="http://jsfiddle.net/" style="height:100%;width:100%" height="100%" width="100%" frameborder="0" ></iframe>
</body>
I've embedded a Google map onto my website in an iframe:
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905" width="614" height="244" scrolling="no"></iframe>
This is invalid, and I need to somehow pull off the scrolling aspect in CSS. How would I do this?
<iframe style="overflow:hidden;"></iframe>
Late response
The only solution I found so far is setting overflow to hidden and set width, height to a parent div.
In your case:
<div style="width:614px; height:244px;">
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905"width="614" height="244" style="overflow:hidden; width:614px; height:244px;"></iframe>
</div>
I have found another solution which worked.
<iframe src="...." class="frame-abc" scrolling='no' ></iframe>
.frame-abc {
border:none;
overflow:hidden;
margin:0;
height:230px;
width:570px;
}