I have an AngularJS / Ionic App (I don't know whether the issue is related to Ionic or Angujar). Recently the UI has begun to behave differently in Safari (both on IOS and on a MacBook). Check out the pictures:
When I push the plus button, 250 is added to the 3000. In the next picture I've pushed to button a couple of times and this happens:
It should say 3750. It is like the bottom part of the number has been updated, but not the top part?
Related
My Cordova/Ionic (v1.3.0) App consists primarily of a JQuery App that builds the HTML for complex forms. The same JQuery App is used to build the complex forms for the web browser with only a few places where it inserts mobile-specific code.
I am now trying to have a horizontally scrolling table section within the vertically scrolling form (the form itself doesn't scroll horizontally, just the table section). The section horizontal scrolling works in Safari/Chrome/Firefox on the computer, in Safari on iOS, and in the Android version of our Cordova/Ionic app but it doesn't horizontally scroll in the iOS app.
I tried various fixes based on these SO questions and documentation (q1,q2,q3,q4) where I changed it from a <div/> to <ion-content/> and added the overflow-scroll="true" direction="xy" delegate-handle="tableGroup" properties and called $ionicScrollDelegate.$getByHandle('tableGroup').resize() after the JQuery app loaded but nothing worked. I also tried using TinyScrollbar based on this question but that wasn't loading right. So I've tried going many directions but haven't gotten anywhere. Any suggestions?
I actually figured this out on my own. I put a couple variations of a simple scrolling elements in containers on the Ionic page and <ion-scroll/> worked. Then I tried putting it in the JQuery app with a delegate handle sectionScroll and called $ionicScrollDelegate.$getByHandle('sectionScroll').resize(); after the JQuery app loaded but got a console warning saying that it couldn't find anything named sectionScroll and that I should put it in a $timeout(). I tried that but it still didn't work. Then I realized that since <ion-scroll/> is an angular directive that is created as part of a long template string inserted into the Ionic app using JQuery, it needed to be compiled by Angular to be recognized as below:
let toCompile = angular.element('#formContent');
let linkFn = $compile(toCompile);
linkFn($scope);
$ionicScrollDelegate.$getByHandle('sectionScroll').resize();
I have a Cordova (version 6.3.1) app. This issue only occurs on iOS version of the app (Android works fine). Every time i press on a text box to insert a text after doing some scrolling, it jumps straight back to the top. After some investigating, I found out that
DisallowOverscroll=true
in cordovas "config.xml" only works on the main screen of the app, not if I go and click on a "modal" "KompressionStromper" in the video (it does not work inside there), so how can I enable it inside there? So the behaviour is not like in video?
Please see video here on iOS 10.0.2 (during the first seconds i also try to pull at the main screen from top to bottom but there the "DisallowOverscroll" option works as expected).
Any other suggestions and help will be highly appreciated.
For the specific element you can disable overscroll with jQuery.
Like:
element.ontouchmove = (event) => {
event.preventDefault();
}
I strongly suggest that you also create a directive out of it, so it will be more done in a "angular way".
I am using Angular UI Router. Whenever I click on a link with ui-sref the address bar from ios mobile browser shows up. For example when I scroll down, the address bar hides and if I click on a link and the page transition finishes the ui address bar shows up instantly. This makes it less user friendly as the page suddenly shifts a little downwards because of the address bar.
This website has the same issue that I have.
I have found a website that doesn't have this issue although they are not using angular.
This does not happen on android chrome. And only happens in the ios safari. The version that I have tested in was ios 9.
I have tried overflow hidden but this is not the solution that I want because then the address bar is always visible.
What's triggering this behavior?
I have not tested this, but I remember having a similar issue a while back.
I think you could add this meta tag:
<meta name="viewport" content="minimal-ui”>
Check out these other posts: Post 1, Post 2.
Note: minimal-ui is no longer supported in iOS 8 and above (More info). However, not all users have upgraded to iOS 8, so there is still a reason to add it to your project.
I am developing an app (IOS platform) using HTML5, CSS3, angular and cordova(3.8) and stuck with an major issue.
I have a page with footer having three buttons. On click of each button a modal comes up from the bottom. Modal position is set to fixed and inside it as scroll-able container. scroll-able container contains a text area where user can input some text.
Whenever the modal comes up, text area is focused so that keyboard comes up by default. The issue is whenever native keyboard comes up webview is pushed up and entire modal gets scrolled.
I saw same issues been posted by others and I tried few solutions mentioned in reply for those questions like using ionic keyboard plugin, setting scrollTop to 0 on textarea focus. But nothing worked out.
In config.xml, I have set DisallowOverscroll to true.
It would be great helpful if someone help me with this issue ?
I am using worklight 6.2 Consumer Edition on WAS Liberty Profile 8.5.5.1 Server. I am using jQuery Mobile 1.4.2 to develop UI. When I install app on iPhone/iPad, status bar of phone is hiding some part of my app's header.
How can I fix this issue (if its an issue)?
This works fine in a default new app with jQuery Mobile that was generated by Worklight Studio. As you can see, the status does not overlap the text.
You can also take a look at the Worklight Starter with jQuery Mobile edition, that also works on iOS w/out the status bar covering the top of app. Compare your CSS.
You need to provide a screen shot of what you're seeing, as well as provide a sample application where you are experiencing it. This issue originates from your code. Provide code.
One possible solution would be to add some margin-top to whichever element is at the top of your applicaiton's HTML.