CODEWITHSUNDEEP
iosionic-frameworkionic2
user5134138
user5134138

Reputation:

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-content>

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

 <button ion-button>Submit</button>
</ion-content>

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. drive.google.com/open?id=0B22-s3eK4PTLWXpNMk1tbzdjcGs

Upvotes: 1

Views: 1621

Answers (3)

user3029400
user3029400

Reputation: 387

@djumerko is right. Just a little change.

Here is what works for me:

  this.config.set("ios", "scrollPadding", false);
  this.config.set("ios", "scrollAssist", false);
  this.config.set("ios", "autoFocusAssist", true);

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

Upvotes: 0

user5134138
user5134138

Reputation:

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.

Upvotes: 2

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

Try using ion-input like it's in the docs, inside a ion-item.

<ion-item>
  <ion-label stacked>Name</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

if you don't want a ion-label just remove it and add item-content as a attribute to ion-input.

When you use ion-item Ionic automatically adds some classes and components where it places the input inside, maybe the lack of this component is causing your screen to bump when it's unecessary.

Hope this helps.

Upvotes: 0

Related Questions