Keyboard white space issue android

ionic-v1
1

I have created an app that uses a lot of modals and most of the modals use a slidebox within them. This is working fine most of the time but I have an issue on one of the tablets I am testing on (also managed to reproduce the issue on the emulator).

Basically whenever I select an input box within a modal / slide box(not 100% sure that the modal/slidebox is causing the issue) the keyboard has a large white box above it around the same size as the keyboard (see attached screenshot, I have set the background to green so you can see the white space better.).

From my testing it doesnt look like it is the Android version as I can reproduce this on 4.4.4 and 6.0. It looks like it could be the screen resolution of the decive (800 x 1280) as I cannot reproduce on any other screen size.

The strange thing is this happens the first time the keyboard is opened. If I then hide the keyboard and click on an input box again the issue does not happen (the white space has gone).

First time the keyboard is shown whitespace is there:

image
ionicissue1.png644×1053 42.6 KB

After the keyboard has been hidden then another input box is selected the white space goes away:
image
ionicissue2.png644×1053 44.5 KB

Ionic Version: 1.7.16
Tablet: Huawei MediaPad T1 10

If you need anymore information please let me know.

I also seen a lot of posts saying this could be fixed using the hideKeyboardAccessoryBar() setting but it has not fixed the issue for me. Code im using below:

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
    }

It turns out that if I add scroll=“false” to the ion-content the issue goes away. However I need the content panel to be able to be scrolled. Anyone hot any ideas of a work around?

2

I managed to fix this by adding “” to all my ion-content areas that had a input box within them. This still allowed scrolling but removed the white space issue that I wes getting. Credit to this post/comment: