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

#1

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
#2

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

#3

Hi !

app.module.ts

[...]
IonicModule.forRoot({
  backButtonText: 'Retour',
  mode: 'ios',
  scrollPadding: false,
  scrollAssist: true
}),
[...]

register.page.html

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

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

#4

I am using simply IonicModule.forRoot().

#5

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

#6

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

#7

@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:

#8

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

#9

Yes, using scrollTo()

#10

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

IonicModule.forRoot({
  mode: 'ios',
  scrollAssist: false,
  scrollPadding: false
}),