Hi, I saw a post here about how to solve this. But to fix it in this post, they use the deprecated Keyboard plugin instead of the new one. Is there any way to fix this issue with the new Keyboard plugin?
The problem is that when I open my device’s keyboard to enter a text into an input all the page content is moved up. I don’t want this to happen. I just wanna open the the keyboard and nothing else.
Also that solution does not work if I am using WKWebView.
Thanks
Add this into your preferences in the config.xml under the ios platform section.
<preference name="KeyboardResize" value="false" />
Hi, it didn’t work. Also it’s happening on Android, I don’t have an iPhone.
Here are some screenshots of what happen if I click on the Contraseña input:
Before clicking on it:
After:
This is my code for the html;
<ion-content class="login-background" text-center no-bounce>
<img src="assets/img/logoSanitas.svg" class="logo-login" />
<form class="frm-login" (submit)="doLoginLogin()">
<ion-grid class="tabla-form divSinMargen">
<ion-row>
<ion-col col-12 text-left>
<span>
<strong>{{ 'LOGIN_INTRO' | translate }}</strong>
</span>
</ion-col>
</ion-row>
<ion-row class="form-login-row">
<ion-col col-3 text-left class="flex-col">
<ion-label>
<i class="icon icon-user-profile icon-login" aria-hidden="true"></i>
</ion-label>
</ion-col>
<ion-col col-7 text-left class="flex-col">
<ion-input type="email" [(ngModel)]="account.email" name="email" placeholder="{{ 'USERNAME' | translate }}"></ion-input>
</ion-col>
</ion-row>
<ion-row class="form-login-row">
<ion-col col-3 text-left class="flex-col">
<ion-label>
<i class="icon icon-password icon-login" aria-hidden="true"></i>
</ion-label>
</ion-col>
<ion-col col-7 text-left class="flex-col">
<ion-input type="{{type}}" [(ngModel)]="account.password" name="password" placeholder="{{ 'PASSWORD' | translate }}"></ion-input>
</ion-col>
<ion-col col-2 text-left class="flex-col">
<!--<button *ngIf="!showPass" ion-button clear type="button" item-right (click)="showPassword()"> -->
<button ion-button clear type="button" item-right (click)="showPassword()">
<i class="icon icon-ophthalmology icon-login" aria-hidden="true"></i>
</button>
</ion-col>
</ion-row>
<ion-row class="form-login-row">
<ion-col col-12 text-left class="flex-col">
<ion-label>{{ 'LOGIN_REMEMBER' | translate }}</ion-label>
<ion-toggle (ionChange)="notify($event)"></ion-toggle>
</ion-col>
</ion-row>
</ion-grid>
<div>
<!--<button ion-button color="primary" full [disabled]="account.email < 3 || account.password < 3 "><strong>{{ 'LOGIN_BUTTON' | translate }}</strong></button>-->
<!--BOTON ACCEDER-->
<button class="botonSinMargen" ion-button color="primary" full>
<strong>{{ 'LOGIN_BUTTON' | translate }}</strong>
</button>
</div>
</form>
<ion-grid class="grid-form-footer">
<ion-row>
<ion-col class="col-form-footer-izda" col-6 text-left>
<button class="login-pie-fuente" (click)="openRegistrar()">
<strong>{{ 'SIGNUP_BUTTON' | translate }}</strong>
</button>
</ion-col>
<!--
<ion-col class="col-form-footer-dcha" col-6 text-right><span class="login-pie-fuente"><strong>{{ 'LOGIN_FORGOTTEN' | translate }}</strong></span></ion-col>
-->
</ion-row>
</ion-grid>
</ion-content>
And this is myconfig.xml, I placed that preference both under iOS and Android but it didn’t work also:
...
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<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="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="false" />
<preference name="KeyboardResize" value="false" />
<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" />
</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" />
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
<string>We want your location! Best regards NSA</string>
</edit-config>
</platform>
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.0.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
<plugin name="phonegap-plugin-push" spec="^1.11.1">
<variable name="SENDER_ID" value="588738841471" />
</plugin>
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-plugin-geolocation" spec="^4.0.1">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="Acceder a la localización" />
</plugin>
<plugin name="cordova-plugin-network-information" spec="^2.0.1" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.8" />
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
<plugin name="cordova-open-native-settings" spec="^1.5.1" />
<plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="~2.1.2" />
<plugin name="cordova-plugin-ionic" spec="~4.1.7">
<plugin name="cordova-plugin-advanced-http" spec="^1.11.1" />
<engine name="ios" spec="4.5.4" />
<engine name="android" spec="~6.3.0" />
Thanks.
try this in your .scss file, solved problem for me:
.scroll-content
{
padding-bottom: 0 !important;
}
I just have to put that? Not in a specific component with class="scroll-content"?
You can do that as well or you can do as my way. My way will do that for all the input fields. If you want to implement it to just some specific fields I hope you’ll be able to do that as well but it solved my problem.
Let me know if it helps
Basically scroll-content is pre-defined class from Ionic. So you don’t have to do anything in .html file
It didn’t work 
Man, that’s weird because I’ve built a full fledged app using this 
Hi, I have tried .scroll-content { padding-bottom: 0 !important; } and both are not working for me please help me out, when I click on ion-input keyboard push whole page to up, I am using ionic3
This worked for me. Thanks.