Ion-contents shifts up when keypad is opened on device

Question

everyone, I am using ionic version 3 however I am designing a page where the user will register.

The page scrolls if the contents don't fit on the screen, the problem is that currently whenever I open the keypad on my android device the whole content section shifts up and also keeps on scrolling even though there is no content why so? I am posting my code.

My register-user.html code

<ion-header>
<ion-navbar hideBackButton color="title">
    <ion-title text-center>Register</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="content">
    <ion-grid>
        <ion-row>
          <ion-col col-12 ion-fixed>
            <ion-list>
                <ion-card>
                    <ion-card-header>
                        <ion-img class="logo" alt="logo" [src]="myImage"></ion-img>
                    </ion-card-header>
                    <ion-card-content>
                        <ion-item>
                            <ion-label floating>Full Name</ion-label>
                            <ion-input autocomplete="on" type="text" #name></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Email-ID</ion-label>
                            <ion-input autocomplete="on" type="email" #email></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Mobile Number</ion-label>
                            <ion-input autocomplete="on" type="number" #mobile></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Company Name</ion-label>
                            <ion-input autocomplete="on" type="text" #companyName></ion-input>
                        </ion-item>
                        <ion-item class="mpin">
                            <ion-label text-center floating><b>MPIN</b></ion-label>
                            <ion-input text-center type="password" #mpin></ion-input>
                        </ion-item>
                        <ion-item class="proceedButton">
                            <button ion-button large color="secondary" outline padding strong round (click)="register()">&nbsp;<ion-icon name="arrow-forward"></ion-icon>&nbsp;</button>
                        </ion-item>
                        <ion-item>
                            <button ion-button large color="primary" outline padding block round (click)="home()">Registered? Login Now!</button>
                        </ion-item>
                    </ion-card-content>
                </ion-card>
            </ion-list>
           </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

This is the register-user.ts code

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-register-user',
  templateUrl: 'register-user.html',
})

export class RegisterUserPage
    {
        @ViewChild('name') name;
        @ViewChild('email') email;
        @ViewChild('mobile') mobile;
        @ViewChild('companyName') companyName;
        @ViewChild('mpin') mpin;

        myImage:string="";

        constructor(public navCtrl: NavController, public navParams: NavParams)
            {
                this.myImage="./assets/logo.png";
            }

        register()
            {
                // do the register code here
            }   

        ionViewDidLoad()
            {
                console.log('ionViewDidLoad RegisterUserPage');
            }
    }

https://stackoverflow.com/questions/41161705/ionic-2-form-goes-up-when-keyboard-shows — Mohan Gopi, Jan 02 '18 at 03:37
Possible duplicate of [Ionic 2 Form goes up when keyboard shows](https://stackoverflow.com/questions/41161705/ionic-2-form-goes-up-when-keyboard-shows) — Duannx, Jan 03 '18 at 02:13

score 2 · Accepted Answer · answered Jan 01 '18 at 19:44

There are issues with the keyboard that covers input. A way I fixed this was to change the keyboard setting to sit on top of the page and not to move it up.

In AndroidManifest.xml I change the windowSoftInputMode to adjustPan. android:windowSoftInputMode="adjustPan"

Ion-contents shifts up when keypad is opened on device

1 Answers1