CODEWITHSUNDEEP
androidcordovaionic-framework
Sash
Sash

Reputation: 1144

android keyboard displaces the ion-content by pushing it up

Trying to solve this issue for the past couple days with no avail.

I tried a number of different suggestions: How to prevent keyboard push up webview at iOS app using phonegap

https://forum.ionicframework.com/t/ios-keyboard-push-content-out-of-view/6715/last

https://github.com/driftyco/ionic/issues/5432

But none of them seem to work, or at least don't address my problem.

I've implemented an "ionic elastic chat" feature in my app: https://codepen.io/rossmartin/pen/XJmpQr

however, when I focus on the input textarea, the keyboard doesn't cover the ion-content, but it displaces it by, it seems, the height of the keyboard.

enter image description here Test message, which I had to "blindly" enter and press the hardware back button for the keyboard to disappear, and go back to normal.

This problem also happens on another screen, however it occurs ONCE the first time I focus on my search bar, but every other subsequent time it's normal.

enter image description here As you can see here it pushes it up and you can see where the cursor is.

My app.jssettings 

        ionic.Platform.isFullScreen = true;
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }

and I tried additional setup:

    window.addEventListener('native.keyboardshow', keyboardShowHandler);

    function keyboardShowHandler(e){
        setTimeout(function() {
            $('html, body').animate({ scrollTop: 0 }, 1000);
        }, 0);
    }

Upvotes: 0

Views: 1936

Answers (1)

Sash
Sash

Reputation: 1144

Finally I managed to fix this, just after I posted this question:

For anybody else that may be having this issue, what worked for me was:

In the AndroidManifest.xml file (located in platforms\android directory), change the attribute to:

android:windowSoftInputMode="adjustPan"

<activity 
  ...
  ...
  android:windowSoftInputMode="adjustPan">
...
</activity>

Upvotes: 4

Related Questions