Ionic 4 – Keyboard scroll view when ion-input is focused


Hi Ionic Fans !

I’am facing a big problem with Ionic 4 and form.
Sometimes, the keyboard move ion-input below navigationBar or keyboard is above the ion-input

With Ionic 3, I fixed it with scrollPadding, scrollAssist and autoFocusAssist in IonicModule.forRoot() (app.module.ts) + Keyboard.disableScroll(true) in my component.
But with Ionic 4, autoFocusAssist doesn’t exist and Keyboard.disableScroll(true) neither.

Any ideas ?

Thanks you Ionic community :slightly_smiling_face:

1 Like

Hi, I was faced this problem when I started the project. Can you share your code?


Hi !


  backButtonText: 'Retour',
  mode: 'ios',
  scrollPadding: false,
  scrollAssist: true

        <ion-buttons slot="start" padding-start>
            <ion-back-button defaultHref="login"></ion-back-button>
            <img src="./assets/logo.svg" class="header-logo" />
    <form class="register-form" [formGroup]="registerForm">
        <ion-list padding>
                <ion-input placeholder="Nom*" formControlName="lastname"></ion-input>
                <ion-input placeholder="Prénom*" formControlName="firstname"></ion-input>
                <ion-input placeholder="Email*" formControlName="email"></ion-input>
                <ion-input placeholder="Téléphone*" type="number" formControlName="telephone"></ion-input>
        <ion-list padding>
            <ion-label position="stacked">Adresse postale</ion-label>
                <ion-input placeholder="Adresse*" formControlName="address"></ion-input>
            <ion-grid class="birth">
                        <ion-input placeholder="Code postal*" type="number" formControlName="postal_code"></ion-input>
                        <ion-input placeholder="Ville*" formControlName="city"></ion-input>
                <ion-input placeholder="Complément d'adresse" formControlName="address_sup"></ion-input>
        <div padding>
            <ion-button (click)="register()" [disabled]="!registerForm.valid">S'Register</ion-button>

As you can see, nothing special cause autoFocusAssist & Keyboard.disableScroll(true) not exist on Ionic 4. But why, that’s the question…


I am using simply IonicModule.forRoot().


The same issue on iOS - focused input autoscrolled under the header


Have you find any solution for this., Ionic4 is not scrolling content up, so keyboard is covering text field, could you please help me


@mhartington it’s seem to be a global bug.
Can we have a blog post to explain how really work keyboard & form on Ionic ? :slight_smile:


@jeanpierre42 is there any way to scroll up content when keyboard open.


Yes, using scrollTo()


This worked for me today. It prevents the scrolling on focus and does not add extra 20px padding bottom.:

  mode: 'ios',
  scrollAssist: false,
  scrollPadding: false