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:
- 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>