When testing my App on a real Device, the Keyboard overlays the Input Fields instead of scolling to the Position of the focused Input Field.
Can’t figure out how to fix this.
My Env:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 7.1.0 browser 5.0.3
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.11.2
npm : 6.0.1
OS : Linux 4.15
Environment Variables:
ANDROID_HOME : /usr/lib/android-sdk
Misc:
backend : legacy
This is the Template with the Form
<ion-header>
<ion-navbar color="dark">
<ion-title>Deine Lieferdaten</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item-group>
<ion-item-divider color="light">Login</ion-item-divider>
<ion-row>
<ion-item col-6 text-wrap no-lines>
In dein Kundenkonto einloggen
</ion-item>
<ion-item col-6>
<button ion-button block [openPage]="'AccountLoginPage'">
Mein Konto <ion-icon name="settings"></ion-icon>
</button>
</ion-item>
</ion-row>
</ion-item-group>
<ion-item-group>
<ion-item-divider color="light">Standort Lieferung</ion-item-divider>
<ion-row>
<ion-item col-6 text-wrap no-lines>
An deinen Standort liefern
</ion-item>
<ion-item col-6>
<button ion-button block (click)="getLocation()" [disabled]="mapLoaded">
Mein Standort <ion-icon name="navigate"></ion-icon>
</button>
</ion-item>
</ion-row>
<ion-row>
<div id="delivertoloaction" [ngClass]="{'loading-map': !mapLoaded, '': mapLoaded}" *ngIf="openMap">
<ion-spinner *ngIf="!mapLoaded"></ion-spinner>
<!--<div class="mapboxgl-user-location-dot"></div>-->
</div>
</ion-row>
</ion-item-group>
<ion-item-group>
<ion-item-divider color="light">Rechnugsadresse</ion-item-divider>
</ion-item-group>
<form [formGroup]="customerInformation" (ngSubmit)="logForm()">
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>Vorname *</ion-label>
<ion-input type="text" maxlength="30" [formControl]="customerInformation.controls['firstName']"
required #firstName></ion-input>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label floating>Nachname *</ion-label>
<ion-input type="text" maxlength="30" [formControl]="customerInformation.controls['lastName']"
required #lastName></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>Strasse und Nr. *</ion-label>
<ion-input type="text" maxlength="40" [formControl]="customerInformation.controls['adress']"
required #adress></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<ion-item>
<ion-label floating>PLZ *</ion-label>
<ion-input type="number" maxlength="5" [formControl]="customerInformation.controls['zip']" required
#zip></ion-input>
</ion-item>
</ion-col>
<ion-col col-9>
<ion-item>
<ion-label floating>Ort *</ion-label>
<ion-input type="text" maxlength="30" [formControl]="customerInformation.controls['city']" required
#city></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>Telefon *</ion-label>
<ion-input type="tel" maxlength="20" [formControl]="customerInformation.controls['phone']" required
#phone></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label floating>E-Mail *</ion-label>
<ion-input type="email" maxlength="30" [formControl]="customerInformation.controls['email']"
required #email></ion-input>
</ion-item>
</ion-col>
</ion-row>
</form>
</ion-content>
<ion-footer>
<ion-toolbar color="dark">
<ion-grid>
<ion-row>
<ion-col>
<div class="cartpage__footer">
<span class="cartpage__amount-text">{{amount}} €</span> <span class="cartpage__taxes-text">inkl. MwSt</span>
</div>
</ion-col>
<ion-col>
<ion-buttons end>
<button ion-button (click)="saveAddressAndContinue()" [disabled]="!customerInformation.valid" clear>
Zahlarten <ion-icon name="arrow-forward" class="cartpage__icon-checkout"></ion-icon>
</button>
</ion-buttons>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
Before focusing an Input Field
After focusing the input Field
I tried with “.col{ position: initial}” and scrollAssist: true, autoFocusAssist: true
But this Solution works not very good.
If i enter the Page for the first Time, and klick on an Input Field, like “E-Mail”, Keyboard opens, but it does not scroll to the Field. Closing Keyboard and klick on “E-Mail” again, now it works
Does somebody have the same experience and has an more solid Solution?