Ion input hides below keyboard


#1

First see the code:

<ion-row>
    <ion-col col-6>
      <ion-input placeholder="First Name" [value]="fName" [(ngModel)]="fName"></ion-input>
    </ion-col>
    <ion-col col-6>
      <ion-input placeholder="Last Name" [value]="lName" [(ngModel)]="lName"></ion-input>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-12>
      <ion-input type="email" [disabled]="emailDisabled" placeholder="Email" [value]="email" [(ngModel)]="email"></ion-input>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-12>
      <ion-input type="tel" maxlength="10" placeholder="Mobile Number" [value]="mobile" [(ngModel)]="mobile"></ion-input>
    </ion-col>
  </ion-row>

The problem is: When any of the ion-input is focused & keyboard appears, it hides below the keyboard. I want it to scroll above the keyboard, so that it remain visible. How can I achieve this?
Also when I started typing in input field, it scrolls up & visible.

Thanks


#3

I have the same issue, haven’t found a fix yet.
Are you using Flexbox for your layout? Im wondering if this might creating this issue in my particular case.


#4

Not using flexbox or anything. Just wrapped things in div.