Android Keyboard overlays ion-input on real Device

@magic-77 wrote:

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&nbsp;&nbsp;<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&nbsp;&nbsp;<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>&nbsp;<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&nbsp;&nbsp;<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

input-1.png720x1280 39.1 KB

After focusing the input Field

input-2.png720x1280 66.6 KB

Posts: 1

Participants: 1

Read full topic