Keyborad is operlapping on input


Keyborad is operlapping on input, i am using ion-input tag for ionic 2.
Whenever will tap on ion-input then keyboard is shown but ion-input hide. Once i type on keyboard then it’s showing on the screen.

Result Expected: once the tap on ion-input then whole screen and keyboard need to show accordingly


  1. If i use same ion-input in footer then it works but it’s not working in the ion-content.

Code are below:

Log In

        <form #loginForm="ngForm" novalidate>
                <ion-input #email1="ngModel" [(ngModel)]="" name="email" type="email" ngControl="email" required></ion-input>
                <p [hidden]="email1.valid || submitted == false" danger padding-left>Email is required</p>

            <div class="pwd-field">
                <ion-input #password1="ngModel" *ngIf="!showPasswordIsChecked" [(ngModel)]="user.password" name="password" ngControl="password" type="password" required></ion-input>
                <ion-input #password1="ngModel" *ngIf="showPasswordIsChecked" [(ngModel)]="user.password" name="password" ngControl="password" type="text" required></ion-input>

                <ion-icon (click)="showPassword()" class="icons-preview" item-right></ion-icon>
                <button ion-button block large round class="button-light-blue" (click)="onLogin(user)">Log in</button>
    <ion-toolbar toolbar-noBG>
        <button ion-button block large round class="button-dark-blue" (click)="onFLogin()">Log in with Facebook</button>
        <p (click)="onRequestLoginLink()" text-center>I forgot my password.</p>

Ionic 2 RC 3 <ion-footer> <ion-input> keyboard attach on iOS?

Please make sure to check github issue. This is a known issue and is something we’re working on


Do you have any workaround for this.


There is some workarounds in the GitHub issue: