Keyboard issues with Ionic4

Ionic Framework ionic-v3
1

I have developed an android application using Ionic4. The issue I am facing is when the keyboard appears it covers the Input field, screen is not moving up. I have solved this issue in Ionic 3 by the following lines of code. But this does not works in Ionic4. Somebody please help.

imports: [
    IonicModule.forRoot(MyApp, {
    scrollAssist: true,
    autoFocusAssist: true
    })
  ],

HTML

<ion-content>
<div class="field-container">
    <form [formGroup]="credentialsForm" class="width-100">
        <ion-list>
            <ion-item no-padding class="transparent-border">
                <div class="logo-div">
                    <img src="assets/icon/favicon.png" class="app-logo">
                </div>
            </ion-item>
            <ion-item no-padding>
                <ion-label position="floating" color="primary">Username</ion-label>
                <ion-input type="text" color="primary" mode="ios" maxLength="5" formControlName="userName" required></ion-input>
            </ion-item>
            <span class="validation-errors" *ngIf="!credentialsForm.controls.userName.valid && (credentialsForm.controls.userName.dirty || onSaveAttempt)">Username
                is mandatory</span>
            <ion-item no-padding>
                <ion-label position="floating" color="primary">Password</ion-label>
                <ion-input color="primary" type="password" mode="ios" formControlName="password" required></ion-input>
            </ion-item>
            <span class="validation-errors" *ngIf="!credentialsForm.controls.password.valid && (credentialsForm.controls.password.dirty || onSaveAttempt)">Password
                is mandatory</span>
            <ion-item no-padding class="transparent-border">
                <div style="overflow: hidden;width: 100%">
                    <p class="create-account" (click)="doRegistrationNavigation()">Create an Account</p>
                    <p class="forgot-password">Forgot password?</p>
                </div>
            </ion-item>
        </ion-list>
    </form>
    <ion-button (click)="doLogin()" expand="block" shape="round" class="signin-button" color="vibrant">Sign
        In</ion-button>
</div>
</ion-content>

Screenshot_20190401-231206
Screenshot_20190401-231206.png720×1280 59.6 KB

Capture
Capture.JPG506×716 25.2 KB

Any help is appreciated
Thanks and Regards
Anand Raj

2

Hello @anandraj1411 !
I was facing a similar problem if not the same which i managed to fix using a work around.
Here’s how i fixed it

I hope it helps.

3

Thanks for the quick reply.
But I dont think it is proper solution for an application having 10+ screens.

4

Totally agree. I had to do this for a growing app which had 3 screens with inputs.
Like you im still waiting for an official answer on this issue.
Lets hope it gets fixed asap

5

I think we should stick on Ionic3 as it already proved