I have an iframe which contains a form. Everything works fine in desktop and android devices and also in iPads. But in case of iphone 8+ and iphone 7, iOS - 11.3, the moment I start typing inside any field - text field or textarea in this iframe, the page is scrolled to the bottom automatically, so the user is not able to see the data he/ she is entering in the field. This is happening for both Safari and chrome in iOS. iframe is initialised as follows:
<iframe ng-src="myUrl" ng-if="model.seat.survey_url" width="100%" height="100%" border="0" style="border-style: none; height:100%;overflow:hidden;width: 100%;" scrolling="no"></iframe>
This iframe is loaded inside the bootstrap modal and angularjs has been used.
Try the adding the following CSS to the parent page if you are able, it fixed the same issue for me.
html, body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Related
I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).
However, it's not working on iOS. The iframe is diplayed and can be scrolled (screenshot) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my tablet (android).
I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!
Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).
This is the CSS of the div that contains the iframe:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
and this is the CSS of the iframe itself:
max-width: 100%;
min-width: 100%;
height: 100%;
Here is the HTML part containing the iframe:
<div class="frame-flex">
<iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!
PROBLEM:
Google is aware of google forms not being responsive on IOS: https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0
Essentially, the embedded google form works fine on desktop but has no scrolling options on mobile. On my IOS 9 tests on ipad, Safari would also crash. Bootstrap4 and Angular tests I conducted found that embedded iframe google forms were also non responsive and no scroll bar.
WORKAROUND:
You can still use the following on IOS if your web page does not use ONE OF THE FRAMEWORKS ABOVE (this also allows for a top navigation bar):
<style>
#all{
width:100%;
height: 100%;
float:none;
text-align:center;
}
</style>
<div id="all">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
</div>
FINALLY (though not directly related to google forms): Check these stackoverflow links:
how to properly display an iFrame in mobile safari
How to get an IFrame to be responsive in iOS Safari?
I can't seem to figure out why I am having issues with an embedded PDF in a simple HTML page on ONLY iOS devices (iPad/iPhone). Android and PC are fine. On iOS devices it renders the PDF on the page as what appears to be a PNG file. It only renders the first page of the PDF. Scrolling doesn't work, neither does tap and hold. The browser doesn't see it as a PDF. I've tried:
<object data='edoc.pdf'
type='application/pdf'
width='100%'
height='700px'>
</object>
Even tried an iFrame/DIV and while I can get the frame to scroll, it's only when I shrink the frame smaller than the "pdf" is renderd and it simply scrolls the single image around.
<style type="text/css">
.scroll-wrapper {
display: inline-block;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-wrapper, .scroll-wrapper {
width: 400px;
height: 400px;
}
</style>
<div class="scroll-wrapper">
<iframe src="edoc.pdf" id="test" ></iframe>
</div>
I'm at a loss. My application needs to use an embedded PDF but I need to figure out why the iOS devices are such a hassle. This behavior has been repeated on Safari, Chrome, Firefox. On iPhone and iPad. Version has been consistently iOS 10+. I've checked the web server mime type is setup properly for PDF. I've tried multiple PDF's from multiple locations.
Linking to the PDF
<a href='edoc.pdf'>PDF Name</a>
Works just fine. I'm lost. Help.
Any help is welcome.
I have an xcode project with html files. I am embedding a google doc using an iframe, but when I run the simulator, the width overflows on the right for iphone 6 and larger. It looks fine on iphone 5.
I've tried to change the margins in google docs and attempted some styling of the iframe.
iframe {
width: 100%;
display: block;
}
<iframe src="thesrc"></iframe>
I have also tried to embed it a container, but that didn't work either. I'm not sure if it's a css issue or I can't get a responsive iframe within xcode. Again, seems to be working fine on iphone 5.
If I understood your question correctly, I think you need to provide the correct media CSS rules. I don't know though if you can this in the external html of an iframe.
to perform media queries, you can do something like
#media screen and (min-width:500px) {
body {
margin: 0 auto;
width: 768px;
}
}
I tested my website application on both my iOS devices and my Windows PC, along with the Google Chrome device toolbar. Any fixed elements inside the iFrame are fixed when using the website application on my Windows PC and Google Chrome device toolbar. However, any fixed elements inside the iFrame are not fixed on iOS devices. Apparently this could be a bug that iOS devices have and was wondering if there is a solution so that elements that are suppose to be in a fixed position are actually fixed on iOS devices. Here is the CSS code I have:
/* Div that contains the iFrame */
#interactWithNav {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
filter: blur(5px);
display: table;
text-align: center;
}
/* iFrame that loads the page with the fixed elements */
#interactWithNavFrame {
border: 0;
width: 100%;
height: 100%;
}
If it were me, I would create a targeted test to prove these theories and show them.
I'd make a mini website with a fixed position element, and an absolute element (for good measure)
http://codepen.io/sheriffderek/pen/xqaYqM
Then I would make another mini website with an iframe of the source of that previous website example(in this case the debug CodePen version) http://s.codepen.io/sheriffderek/debug/xqaYqM
http://codepen.io/sheriffderek/pen/GWXQBN
Send this link to your phone:
http://s.codepen.io/sheriffderek/debug/GWXQBN
Then I'd use the debug version of that to test on the iPhone or whatever.
<header>
<h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
header....
<div class='fixed-thing'>fixed-thing</div>
</header>
<main>
main
<div class='absolute-thing'>absolute-thing</div>
</main>
and then...
<main>
<iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>
Everything seems normal to me.
Can this help you explain the issue a bit more? Are you using any transform: translate in your code? Why are you positioning the iframe in an absolute container?
It appears that the iFrame is automatically full height on iOS no matter what you set it to, so no scrolling, which means fixed wouldn't even be detectable... See this thread: How to get an IFrame to be responsive in iOS Safari?
I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}