Android keyboard hiding input

I have a scrollable ion-content with a lot of stuff inside. There’s a text area just near the bottom. Problem is that when I click it, the keyboard appears and overlaps it. Works fine on iOS. I have Keyboard Plugin installed and Fullscreen mode on. Any ideas?

Here is my config.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.mokapp240958" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Moked RS</name>
  <description>
    Relatório Situacional da Moked do Brasil.
</description>
  <author email="gustavo84171@hotmail.com">
Gustavo Faustino
  </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="Fullscreen" value="true" />
  <feature name="Keyboard">
    <param name="android-package" value="com.ionic.keyboard.IonicKeyboard" />
    <param name="onload" value="true" />
  </feature>
  <feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true" />
  </feature>
  <icon src="www/res/icon.png" />
  <preference name="SplashScreen" value="screen" />
  <!-- Do not auto hide splash on iOS -->
  <preference name="AutoHideSplashScreen" value="false" />
  <!-- Do not auto hide splash on Android -->
  <preference name="SplashScreenDelay" value="10000"/>
  <preference name="android-windowSoftInputMode" value="adjustResize" />
</widget>

Okay, I turned off Fullscreen. Now it doesn’t hide the inputs anymore, but footer keeps attaching to keyboard and I want it to hide when keyboard is open.

All right, I got it fixed.

If someone ever has the same problem, here goes my solution:

-Set fullscreen to false on config.xml;
-Put this on your CSS:

.keyboard-body .hide-with-keyboard{
	display:none !important;
}

-Now put this inside your $ionicPlatform.ready():

        if(ionic.Platform.isAndroid()) //iOS works fine
        {
            window.addEventListener("native.showkeyboard", function(){ //hide stuff on keyboard open
                if(document.getElementsByTagName("body")[0].className.indexOf("keyboard-body") === -1)
                {
                    //this event tends to fire multiple times, so we just add the class if it's not already there. 
                    //Otherwise we'll end up with this class repeated.
                    document.getElementsByTagName("body")[0].className += " keyboard-body";
                }
            });
            window.addEventListener("native.hidekeyboard", function(){ //show stuff on keyboard hide
                document.getElementsByTagName("body")[0].className = document.getElementsByTagName("body")[0].className.replace("keyboard-body", "");
            });
        }

-This will hook into show keyboard and hide keyboard events and add this keyboard-body class to the body whenever keyboard is open.
-Now you just have to sign every element that you want to hide with hide-with-keyboard class.

-There is already stuff like this inside ionic.js but for some reason it was not working for me.

3 Likes

Had same issue - this fixed it. Thanks!

Had some issue like this too, and finally i disabled fullscreen mode for my app …

use class="hide-on-keyboard-open" like this this will hide the desired html element when keyboard is open:

  <ion-footer-bar class="hide-on-keyboard-open">
     //stuff inside
  </ion-footer-bar>

It’s only working solution I found so far but it is very slow on my device, do you know about any faster alternative?

Showing content is fine. But hiding takes ages

it works for me, thanks!

Keyboard overlap input fields of page content in mobile app
i have an application using angularjs and ionic v1.2.4
and have added this code into config.xml file

and manage the css file
.keyboard-body .hide-with-keyboard{
display:none !important;
}

and app.js file in $ionicPlatform.ready() with the content:
if(ionic.Platform.isAndroid()) //iOS works fine
{
window.addEventListener(“native.showkeyboard”, function(){ //hide stuff on keyboard open
if(document.getElementsByTagName(“body”)[0].className.indexOf(“keyboard-body”) === -1)
{
//this event tends to fire multiple times, so we just add the class if it’s not already there.
//Otherwise we’ll end up with this class repeated.
document.getElementsByTagName(“body”)[0].className += " keyboard-body";
}
});
window.addEventListener(“native.hidekeyboard”, function(){ //show stuff on keyboard hide
document.getElementsByTagName(“body”)[0].className = document.getElementsByTagName(“body”)[0].className.replace(“keyboard-body”, “”);
});
}

mentioned in this solution: Android keyboard hiding input
but it is not working.
Thanks in advanced.!
config-xml|619x500


style-css