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
Related
I have embedded a google form on my website here: https://gymefit.tw/groupclasssignup/
On the mobile view of this page in safari it seems to be defaulting to the center. I tried to fix it with CSS but have not had any luck
I've tried a bunch of stuff on css but am still a bit new so I think I am missing something here.
<div class="group">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSep0dl_-1LARR9R0ZVwrDz9Wy7rFI0cbxp6ckT6xAZFgLyLhQ/viewform?embedded=true" width="640" height="4303">
</iframe>
</div>
CSS:
.group iframe {
text-align:left !important;
}
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
i'm opening a website in an iframe (using a bootstrap modal) and
i know that there will be a vertical overflow in that iframe.
Because there is a navigation bar of 200px on the left site on that opened website
i want to auto scroll 200px to the right.
does somebody know how to handle that?
Put the iframe in a div with overflow:hidden;
iframe style margin-left:-200px;
Problem solved, do you need an example or is the problem resolved with this answer?
UPDATE
<div style="overflow:hidden;">
<iframe src="http://floradetuinen.nl/" width="900" height="900" style="margin-left:-200px">
</div>
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>
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;" ... >