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
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.
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.
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:
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!