I am currently developing a hybrid app in iOS that loads a website and has some other features (contacts, sharing, notifications...) using cordova plugins. I do have access to the content of the site that is being displayed by the iframe.
The normal way this is done is to load the website in an iframe. I have already done this in android and it works very well. In iOS however:
Safari messes up the size of the frame. I fixed this by setting the min-width css style to 100% for the frame.
Scrolling on the iframe is always set to "no" even if you specify "yes. I "fixed" this (so I thought) by using the only solution I could find which is to wrap the iframe in a div and scroll the div. This made the header (position:fixed) scroll with the page when it should be fixed to the top of the page and broke other things on the page that rely on scroll position to trigger an action. I also tried modifying the body of the content to contain css styles mentioned here but this didn't work either. I was back to square one.
I have spent a total of a week researching how to fix this with no avail. Recently I have discovered that loading my website in iOS's UIWebView or WKWebView works well to display the site exactly how I would expect.
That brings me to two possible solutions (and my question):
Maybe I missed something with the css style on the content of the site. I read that it is possible to get scrolling to work this way but I am sceptical because safari does not allow scrolling on an iframe.
(The likely solution but the one I cannot figure out) Make my cordova app use a one of iOS's webviews. This is what I am having problems with. I cannot figure out how to do this. Is a webview an iframe? How do I use one of these webviews in my app? What does the index.html (cordova specific file) look like when I use a webview instead of an iframe (because currently this is where my iframe is).
I solved this. Since I have access to the contents of the page, I added:
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
To the scrolling body of the page. This fixed my problem
Related
Iframe automatically goes full screen using Ionic 3.9.2 on iOS.
I've tried removing all the fullscreen tags. I notice that it is not happening anywhere else. Only happens on iOS. On other devices, I have to manually make it full screen.
Why does Iframe automatically go full screen on iOS?
<iframe src="https://d1mlukbqb3dh9w.cloudfront.net/PortraitCourse/Module01/Module01Section1/story.html" height="655" width="100%"></iframe>
A while ago I would have been able to provide you with a spot-on answer. Unfortunately I no longer have access to the resources I would need to do so... meaning my answer won't be a complete solution.
IFRAME, on iOS, works slightly differently than on Android. Getting an IFRAME to take only the height you want is not simply a matter of setting the HEIGHT property on the tag as the rendering engine works differently. You'll have to play around with CSS both in the container of the tag and in the contents of the body itself.
Try proceeding as follows:
prepare a mock target page that doesn't take all the height, make
its background red and see how much space it takes
make the mock page longer than the height of the screen by adding lots of text and images to it and observe the change
wrap the IFRAME in a DIV and set the style=height: xxx of the div, as well as its overflow.
wrap the contents of the mock page in a div, setting its height, overflow, position and display style
properties to control its appearance.
repeat step (4) with both the HTML and BODY tags of the mock page.
Playing with these in real-time using Safari to alter their values will prove most useful. It was to me at least, when I had the problem over an year ago.
Problem
We have an Ionic2 project. Ionic (on iOS) creates a Safari browser. Safari allows for what I call "overscroll". This is when you can scroll beyond the top or bottom of the page and the page snaps back.
One of our pages has a small signature pad. If a user tries to sign with their finger, they instead scroll the screen. The page content is small enough that it shouldn't be scrollable, but the overscroll causes the page to move.
Desired
We just want to disable the blasted overscroll.
Really all of our Ionic projects suffer from this drawback in some form or another, but this is the first project where it blatantly breaks functionality. In other cases it's just an annoyance.
Appeal
Is anyone familiar with how to disable this overscroll? Whether through ionic, a cordova plugin, or the HTML itself.
If I have understood you correctly then this is actually really easy to do.
Just add no-bounce to your <ion-content> element.
e.g.
<ion-content no-bounce>
I'm building an iOS wrapper application for a web page, which was built using Bootstrap, at the top of my web app is a .navbar div, not fixed or anything and displays perfectly on first load.
The problem starts when I touch an input, type and then hide the keyboard. Once the keyboard has hidden the page has been moved back down, but the navbar is nowhere to be seen.
It turns out this was caused by a bug in the CSS code which gave a margin to the body. The simplest way to fix this was to change the CSS. Although I'm still none-the-wiser as to how control the UIWebView in such situations.
I would like to add vertical scroll in Phonegap app. The app is able to move left and right.. but not up and down.. Need some guidance on how to do it.. Thanks..
depending on how your app is set up there are a few options out there.
1) If you don't need a fixed header ( very rare but does happen ) you can use a normal css approach, phonegap is just a webview wrapped as a native app, so most things in a browser will work here.
2) if you need a fixed header and footer I suggest iScroll.
iOS 5 gave us -webkit-overflow-scrolling: touch, which works in mobile safari, BUT since a webview is mobile safari's little brother you aren't given all of the awesomeness that regular safari has.
all containers, which are higher than 100% viewport con carry the CSS: overflow: auto or overflow: scroll.
important is, that the container (i think a div) is set to height: 100%.
this is a idea for solving with CSS.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps