CODEWITHSUNDEEP
iosangularionic-frameworkionic4ios13
Kinectech Mex
Kinectech Mex

Reputation: 43

Ionic-v4 Keyboard covering input field in iOS 13

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!

Upvotes: 1

Views: 1471

Answers (1)

Abdul Rafay
Abdul Rafay

Reputation: 25

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

Upvotes: 2

Related Questions