Keyborad is operlapping on input

Ionic Framework ionic-v3
1

Keyborad is operlapping on input, i am using ion-input tag for ionic 2.
Condition:
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

Observation:

  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>
            <div>
                <ion-input #email1="ngModel" [(ngModel)]="user.email" name="email" type="email" ngControl="email" required></ion-input>
                <p [hidden]="email1.valid || submitted == false" danger padding-left>Email is required</p>
            </div>

            <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>
            </div>
            <div>
                <button ion-button block large round class="button-light-blue" (click)="onLogin(user)">Log in</button>
            </div>
        </form>
    </ion-list>
    <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>
    </ion-toolbar>
</ion-view>
2

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

3

Do you have any workaround for this.

4

There is some workarounds in the GitHub issue: