I've been trying to solve this particular bug for quite a while, but I haven't made any progress in fixing it.
Anyway, the bug basically is where when clicking on an input, the keyboard will cover the input until I start inputting numbers, at which point it'll scroll down correctly.. (Also, it suddenly loses its translucency and becomes solid... I'm not sure what's causing that either...)'
I've already uninstalled ionic-plugin-keyboard, and downgrading cordova-plugin-ionic-keyboard to version 2.0.5 didn't fix the issue for me (I'm currently running v2.2.0). I'm also running the latest version of cordova-plugin-ionic-webview (v4.1.2)
Here's an imgur link showing the bug in action
Thank you!
Unstable for IOS 13
"cordova-plugin-ionic-keyboard" KeyboardResize feature is unstable for IOS 13.
Issue is still open on git with no proper solution.
View not resizing on iOS
I am using it in both Android and IOS so i had to came up with a workaround in my code(not a good one btw but works so i am putting it here).
Step 1: Set resizing to none in for config.xml
<preference name="KeyboardResize" value="false" />
Step 2: Add an empty div just above your footer with display set to none.
<div class="keyboardFix" style="display:none"></div>
Step 3: Now set the height of .keyboardFix class equal to keyboard height and make it visible just before keyboard using "keyboardWillShow" event.
window.addEventListener("keyboardWillShow", function (evt) {
if (rootParams.baseModel.cordovaDevice() && rootParams.baseModel.cordovaDevice() == 'IOS') {
$(".keyboardFix").height(evt.keyboardHeight * 0.9 );
$(".keyboardFix").css("display","block");
}
});
Step 4: Make is go away just before keyboard hides.
window.addEventListener("keyboardWillHide", function (evt) {
if (rootParams.baseModel.cordovaDevice() && rootParams.baseModel.cordovaDevice() == 'IOS'){
$(".keyboardFix").height(0);
$(".keyboardFix").css("display","none");
}
});
Note: If condition only required if you are using same UI for cross platform i.e. Android
Related
I'm using the ionic framework for the first time to develop a hybrid app (version is up to date). Upon testing my current work with the provided DevApp, I cannot get the accessory bar to show above my iPhone keyboard by any means. I tried to install the https://ionicframework.com/docs/native/keyboard/, added it to my modules and in app.components.ts my constructor looks like this:
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, keyboard : Keyboard) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
keyboard.hideFormAccessoryBar(false);
});
}
There are no errors in the console, only the bar is not appearing. Is it only because of the DevApp, or am I doing another mistake?
If more information is required, I will be glad to provide it. Thanks in advance!
I am trying to build a simple messaging view in ionic. My view looks as follows:
Initial screenshot
My problem is when I focus the input on iOs, the keyboard covers the input, however on an Android device, the input moved along with the appearing keyboard as expected.
My understanding that if I use position: fixed and indicate bottom value (say, bottom: 16px) the input should appear 16px above the page fold both when the keyboard is open and when it isn't.
For reference, this is the result I get when I try to focus the input on an actual iOs device.
On-screen keyboard covers up input
I had this problem with ion-textarea. I'm using ionic 4 beta 17 - ionic keyboard 2.1.3
I am still not using native keyboard, but maybe will try.
What I did is hookup the keyboardDidShow event and scrolled the active document into view. Look at this code:
ngOnInit() {
window.addEventListener('keyboardDidShow', () => {
const el = document.getElementById('myElement');
//myElement would be the input you have. Or you can just scroll into view the active element, like
// document.activeElement.scrollIntoView();
if (document.activeElement === el)
el.scrollIntoView();
});
}
I am facing a problem very similar to what was reported and resolved in this SO Question: iOS 11 Safari bootstrap modal text area outside of cursor
. However, the difference for me is that I am using Aurelia & Semantic UI.
I have tried using position: fixed in ux-dialog-body as described in several fixes for the problem occuring in bootstrap (in those examples to be added to the body of the modal), however that did not work.
I would appreciate any help on this issue, thanks in advance.
So I got the idea for the fix here : Semantic-Org/Semantic-UI-React
Basically the problem relates to the height of the content behind the modal/what the modal is lying on top of. So, hide all of it when opening the Modal and put it back when done. However, only for iOS, because for some reason on our site doing otherwise breaks Android devices.
iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
In opening the modal
if (this.iOS) {
$('body > :not(ux-dialog)').hide();
$("ux-dialog").show();
}
And closing
if (this.iOS) {
$('body > :not(ux-dialog)').show();
$("ux-dialog").hide();
$("ux-dialog-overlay").hide();
$("ux-dialog-container").hide();
}
I hope this helps someone else.
I've created an app for Android and iOS using Phonegap and Ionic Framework, the goes perfectly on Android but it has an issue on iOS specially with the iPhone 5 and the iPad (It works well on iPhone 6 and 4).
When you tap a button that makes the rol of a backbutton, the back animation is shown but inmediatly the goes back to the section where the backbutton was taped. It only happens on one section, the backbutton works perfectly on the others sections.
The HTML element is the following:
<a class="button button-icon button-positive button-positive icon ion-arrow-left-c" ng-click="atras()">
The function called is "atras" which is the following (Located in the controller of the template):
$scope.atras = function() {
$ionicHistory.goBack();
};
Have any idea of how could i resolve this? Thanks a lot for your answers!
Specifically, there is a notable patch for Ionic UIWebView that are built on iOS9. Without this patch, you will experience such flickering issue when you tap on some back buttons in navigation bar. Please apply ngIOS9UIWebViewPatch for your project then it's all done.
https://gist.github.com/IgorMinar/863acd413e3925bf282c
http://blog.ionic.io/ios-9-potential-breaking-change/
Unfortunately iOS 9 has some bugs with with window.location that impact the router-ui and also some empty href links <a href="#"> like yours.
Take a look to these articles from Ionic's blog:
Preparing for iOS 9
iOS 9 Potential Breaking Change
There you can find the link to the iOS9 patch for angular and this for Disable App Transport Security in iOS 9
Add these two properties to prevent flickering effects:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Apply also to flickering elements which AREN'T being animated for the same fix.
I am implementing a webapp using jQuery Mobile and Phonegap. One thing I am missing, is the following: The App should scroll to the top when the statusbar is tapped.
I have already seen that using Objective C one has to indicate the view that has to scroll to top on tap. Is it possible to do something similar with Javascript/Phonegap?
Update for 22.9.2016
It's working fine
Plugin ID has changed, install it using:
cordova plugin add cordova-plugin-statusbar
Tested with cordova-6.3.1 cordova-ios-4.2.2 in the iOS 10.0 simulator and an iPhone 6s Plus running 9.3.5.
The official status-bar plugin has this feature.
https://github.com/apache/cordova-plugin-statusbar
Install:
cordova plugin add org.apache.cordova.statusbar
In your javascript:
window.addEventListener('statusTap', function() {
//scroll-up or do whatever you want
});
I wrote a plugin to solve this issue
https://github.com/j-mcnally/cordova-statusTap
you can register tap events on the status bar and handle this all in code. With an event listener.
if the content that you are displaying in the phonegap app is bigger then the bounds of the webview, the scroll happens automatically.
Otherwise - for example if you are just scrolling a div using -webkit-overflow-scrolling - you need to use the solution found here:
How to detect touches in status bar
In the scrollViewShouldScrollToTop you need to call
[theWebView stringByEvaluatingJavaScriptFromString:"should_scroll_to_top"];
should_scroll_to_top is a normal function in your js.