Selected ion-input border is moving up and down when the keyboard enters to the screen


#1

I’m using ionic3.The selected ion-input’s border in the ion-content is moving when the device keyboard enters to the screen as below.

my .html is like,

<ion-list>
  <ion-card class="xxx-card">
    <ion-item>
      <ion-input class="xxx-card" [disabled]="invoice.isChecked === true" text-center type="number" [(ngModel)]="invoice.paymentValue"
        (ngModelChange)="paymentValueCange($event,invoice,i)" name="paymentValue"></ion-input>
    </ion-item>
  </ion-card>
</ion-list>

And the .css

.xxx-card{
border: 2px solid #00BB84;
margin:10px auto;
border-radius: 10px !important;
}

All I need to do is stop ion-inputs moving when the keyboard enters to the device screen.Waiting for your suggestions.Thank you!


#2

Hi! I’m having the exact same problem. Did you find a solution?