djumerko djumerko - 2 years ago 136
iOS Question

Ionic 2 page jumps up and down in iOS when using ion-input

I use this ionic version.

Cordova CLI: 6.2.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.2
Node Version: v7.4.0

Here's the code and its purpose is for the user to enter info and submit it.


<ion-list *ngIf="isTest">
<ion-input> </ion-input>
<ion-input> </ion-input>
<ion-input> </ion-input>

<button ion-button>Submit</button>

On Android it's working, but when I test it on iOS, when I click on ion-input the page jumps up and down which is not good UX at all. Any ideas how to solve this issue on iOS ?

Here is video example of the issue.

Answer Source

Ok. After some research I found the answer for my issue. If someone else is having issue like this one, then in app.component.ts file you should add this lines.

constructor(private config: Config) {
    this.config.set("scrollPadding", false);
    this.config.set("scrollAssist", false);
    this.config.set("autoFocusAssist", true);

    this.config.set("android", "scrollAssist", true );
    this.config.set("android", "autoFocusAssist", "delay");

this solved my problem for iOS and Android.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download