I'm currently working with Ionic 3 and experiencing an issue where the selected ion-input's border in the ion-content is shifting when the device keyboard appears on the screen. Here is a visual representation of the problem: https://i.stack.imgur.com/seQme.gif
The structure of my .html file looks like this:
<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>
Here is how I've styled it within the .css file:
.xxx-card{
border: 2px solid #00BB84;
margin:10px auto;
border-radius: 10px !important;
}
I am looking for suggestions to prevent the ion-inputs from moving when the device's keyboard appears on the screen. Any help or advice would be greatly appreciated. Thank you!