Android Keypad covering input - fix but flickering

I was having the issue on a nexus 7 with android 4.4.2 where the keyboard was covering up half the screen which was a problem because my input field was in the footer.

The problem I found is that when config.xml has the preference:
"<preference name="fullscreen" value="false" />the ionic code doesn’t sense a height change when the keyboard opens. If you just make fullscreen false, then the keyboard will open flicker and then close.

Looking into the ionic.js you find a function called resize() in the androidKeyboardFix function.that has the footer hide

  document.body.classList.add('hide-footer');

It seems that the function opens the keyboard, senses the negative height change, then hides the footer, which causes it so sense a positive height gain which it thinks is a close of the keyboard so it then goes back to the fullscreen state.

The solution that worked for me was to set the following:

in config.xml

<preference name="fullscreen" value="false" />

I also commented out in ionic.css
document.body.classList.add(‘hide-footer’);

I don’t think it matters (but lots of posts played with the viewport so I’ll put it here), but my viewport in index.html was set to

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

I’ll do more testing on android and ios, but this worked for the nexus 7. I’d like to know if there are any issues with changing fullscreen to false.

I’m getting some flickering now though.

hey Aaron i tried by placing the <preference name="fullscreen" value="false" />in my config.xml file but i am unable to find this document.body.classList.add('hide-footer'); line in iconic.js file. i am still not able to resolve the issue that keyboard is hiding the inputs even after tapping on those inputs.

It is on line 2492 of the 0.9.26 release. Here is the surrounding code.

    if (rememberedDeviceWidth !== window.innerWidth) {
  rememberedDeviceWidth = window.innerWidth;
  rememberedDeviceHeight = window.innerHeight;
  

//If the height changes, and it's less than before, we have a keyboard open
} else if (rememberedDeviceHeight !== window.innerHeight &&
           window.innerHeight < rememberedDeviceHeight) {
  **document.body.classList.add('hide-footer');**
  //Wait for next frame so document.activeElement is set
  ionic.requestAnimationFrame(handleKeyboardChange);
} else {
  //Otherwise we have a keyboard close or a *really* weird resize
  document.body.classList.remove('hide-footer');
}

I’m not happy with the blinking, so I’ll update this thread once I work that out.

Hi Aaron, can you post your footer html? I have same problem here and your code doesn’t work :confused:

Here is the footer that I’m currently using. I have it wrapped in a form so that when I hit return or go it submits the information. On iOS it seems to work fine with and without this change.

<form ng-submit="newText(userChats,new.text)">
        <div class="bar bar-footer bar-calm">
        <label class="item-input-wrapper">
                    <input class="input" style="width: 100%"type="text" ng-model="new.text">
            </label>
            <button class="button button-balanced rounded" ng-click="newText(userChats,new.text)" >Send</button>
        </div>
    </form>
2 Likes

It Works! Thank’s man.

Aaron - thanks for the solution! It worked for me but I didn’t want to edit the Ionic javascript (in case an upgrade later). I found this to work for me:

To your application’s css add:

.hide-footer .bar-footer, .hide-footer .tabs {
display: flex;
}
.hide-footer .has-footer, .hide-footer .has-tabs {
bottom: 44px;
}

Thanks again!

Thank You so much!
My issue wasn’t that the input was covered, but that the on-screen keyboard would open then close right away.
Your solution fixed my issue as well!