I am using cordova-plugin-ionic-keyboard plugin for keyboard in my Ionic3/Angular app. My Ui looks like below before the keyboard appears:
emphasized text
But, when the keyboard appears it crashes the layout of the application like below:
Then, i tried to halt the resize of the layout in the config.xml using below code:
<preference name="KeyboardResize" value="false" />
But, still the UI breaks. Then tried all the three combination of KeyboardResizeMode but still UI breaks.
<preference name="KeyboardResizeMode" value="body" />
<preference name="KeyboardResizeMode" value="ionic" />
<preference name="KeyboardResizeMode" value="native" />
Can anyone point me out how to avoid UI breaking when Keyboard appears in the screen?
Hi @setu1421 , can you share your html file?
I have shared my HTML code. Is it actually the problem of HTML codes or the problem of the keyboard plugin?
Well , Iâm not expert in Ionic, but, have you tested your page with normal keyboard? Iâm asking it because I see your SCSS has many position attributes. Until where I know, how much more you use this, you have so much more chance to break your layout.
Check if this keyboard is created like a element in webview or itâs part of operating system. Maybe, it has elements that makes page to break.
Can anyone point me how to keep the layout even though the keyboard is opened?
Can you share the config.xml file?
<preference name="KeyboardResizeMode" value="ionic" />
It should work!
Add / change de preference and run again!
PD: Always you change config file you need to run (compile) again!
1 Like
No⌠Itâs not working. Still putting âionicâ as KeyboardResizeMode breaks the UI. And i am recompiling when changing in config.xml file. My config.xml is:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.sample" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Sample App</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content original-src="index.html" src="http://192.168.0.101:8100" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="loadUrlTimeoutValue" value="700000" />
<preference name="KeyboardResizeMode" value="ionic" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
<config-file parent="/resources" target="./res/values/strings.xml">
<string name="fb_app_id">156643755035370</string>
<string name="fb_app_name">OfferShare</string>
</config-file>
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
<allow-navigation href="http://192.168.0.101:8100" />
<engine name="android" spec="7.0.0" />
<engine name="browser" spec="5.0.3" />
</widget>
Change in the AndroidManifest.xml file did the trick for me.
android:windowSoftInputMode="adjustPan"
@setu1421 can you instruct how you have imported this cordova-plugin-ionic-keyboard.
I am not able to find any way of accessing its functions in Ionic project.
Thanks in advance
Hi @setu1421
How do you set android:windowSoftInputMode=âadjustPanâ property?
What I did is declare it in component:
import { Component, ViewChild, ElementRef } from '@angular/core';
...
declare var Keyboard: any;
...
@IonicPage({
...
onScrollStart(event) {
Keyboard.hide();
}