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.
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.
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”, “”);
});
}
