Keyboard displaces UI out of sight when focus on an input

Ionic Framework ionic-v3
1

When tap into a form field, the virtual keyboard pops up to the bottom of the screen, but displaces the UI up, making the field disappear (so you can’t see what you are typing).

image

image

I’m not sure why this is happening (I’ve used older versions of Ionic before and this wasn’t hapenning).

This is my ionic info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.3.0
npm               : 5.3.0 
OS                : Linux 3.13

And this is the code of my form:

Iniciar Sesión 
<p>
  <ion-list>
    <ion-item>
        <ion-label floating>Correo Electrónico</ion-label>
        <ion-input type="text" [(ngModel)]="email"></ion-input>
    </ion-item>        
    <ion-item>
        <ion-label floating>Contraseña</ion-label>
        <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>        
  </ion-list>
</p>

<div padding>
    <button [disabled]="!validateFields()" (click)="login()" class="general-button dashboard-btn btn-action">
        Iniciar Sesión
    </button>
</div>

Any help would be appreciated.

2

Which keyboard plugin are you using? The official one or the deprecated one?

Official:

Deprecated:

3

I’m using the official one (which is the one that gets installed by default:

“cordova-plugin-ionic-keyboard”: “^2.0.5”,

These are all my dependencies:

“dependencies”: {
“@angular/common”: “5.0.3”,
“@angular/compiler”: “5.0.3”,
“@angular/compiler-cli”: “5.0.3”,
“@angular/core”: “5.0.3”,
“@angular/flex-layout”: “2.0.0-beta.10-4905443”,
“@angular/forms”: “5.0.3”,
“@angular/http”: “5.0.3”,
“@angular/platform-browser”: “5.0.3”,
“@angular/platform-browser-dynamic”: “5.0.3”,
“@ionic-native/core”: “4.4.0”,
“@ionic-native/splash-screen”: “^4.4.0”,
“@ionic-native/status-bar”: “4.4.0”,
“@ionic/storage”: “2.1.3”,
“cordova-android”: “7.0.0”,
“cordova-plugin-device”: “^2.0.1”,
“cordova-plugin-ionic-keyboard”: “^2.0.5”,
“cordova-plugin-ionic-webview”: “^1.1.16”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.2”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
“@ionic/app-scripts”: “3.1.8”,
“typescript”: “2.4.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-splashscreen”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-device”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-ionic-keyboard”: {}
},

4

Weird I’ve got same version of the plugin and it show above the content, I even sometimes have to move manually the scroll to refocus the inputs

Well then can’t help a lot, maybe some other users gonna have brillant idea, sorry

If you find no solution, maybe you could just trigger a scroll when then keyboard show to recenter your field (“worst scenario”)

 ngAfterViewInit(): void {
    window.addEventListener('keyboardDidShow', this.customScroll);
 }

private customScroll() {
   this.content.scrollTo(0, 100); // 100 replaced by your value
}
5

Well, solved it. The problem was my layout, the style of the div containing the form had height to 100%

Removing that makes it work:

image

1 Like
6

Awesome, congrats!

P.S.: Don’t forget to mark this post/issue as solved then

7

but i dont give height to form and i also facing this problem . keyboard is make extra space in ui from bottom please solve this issue.