Scroll to the focused item input when the keyboard is up

ronald_araujo · July 8, 2015, 8:33pm

@rajeshwarpatlolla thanks! This worked for me.

saurabhgupta050 · July 31, 2015, 10:00am

Disabling native scrolling worked for me

Sidd27 · October 8, 2015, 11:54am

Can we on and off the scrolling based on page to page.
for example i have main page where i want native scrolling and i have add page where i want js scrolling can we do that if so please tell how? @bengtler @adam @Calendee

Baldasso · January 20, 2016, 1:33pm

I have to disabled overflow-scroll=true in ion-content as @rajeshwarpatlolla said, but also changed scroll to true: scroll="true".

Now it’s work for me.

niravf22 · February 12, 2016, 4:30am

I was experiencing a similar issue. jumpy scroll and when you focus on some input while the keyboard is up, the scroll will be erratic and pushes the target input out of the viewport (under header bar).

Just disableScroll didn’t help. It did fix the jumpy scroll but I was still having issues with erratic scrolling on long forms when you tap on input while the keyboard is up.

To fix this, I additionally had to do

.config(function($ionicConfigProvider){
  $ionicConfigProvider.scrolling.jsScrolling(false);
})

Not sure why this was required after disabling scroll.
Hope this helps.

LouisR · February 12, 2016, 8:14am

I still have this issue with ionic 1.2.1.

Did someone find the solution ?

My content tag is:

<ion-content scroll="true" class="has-subheader" padding="true">

Thanks

developersnepal · May 12, 2016, 7:31am

How did you fix it. Can you elaborate please. Thanks

deepikavanamala · July 21, 2016, 5:10am

Iam unable to use two scrollers in single form using ionic.can you provide how to use multi scrollers

mounikar · January 2, 2017, 9:53am

Hi Tim,

Is there any update on this issue ?

harshit886 · January 2, 2017, 11:24pm

use overflow-scroll = true on your ion-content…for universally disabling js scrolling add
ionicConfigProvider.scrolling.jsScrolling(false);
in your config file and please make sure you are using keyboard plugin in your app

mounikar · January 6, 2017, 7:56am

thanks for the update @harshit886, Ya We are doing the same in our app Issue still exists.

It is working fine in landscape and portrait when open directly, But when we rotate the screen from portrait to landscape with the keypad open we are facing the issue.

harshit886 · January 6, 2017, 4:33pm

hey i have checked on android and windows phone. It is working fine will check on ipad also. Sharing the screenshots

mounikar · January 9, 2017, 11:11am

@harshit886 yes, it is working fine in windows and android but we are facing issue in IPAD, Please follow the step below and check once in IPAD

open the keypad in portrait and rotate the device to landscape with the keypad enabled

harshit886 · January 11, 2017, 4:16pm

yeah there is problem on ipad…

diegobill · June 4, 2017, 1:14pm

I added

.config(function($ionicConfigProvider){
  $ionicConfigProvider.scrolling.jsScrolling(false);
})

And

<ion-content overflow-scroll="true" scroll="true" class="has-header">

And the problem was solved, but another problem appears, some parts of the form disappears :

Any idea?

FrancoisIonic · June 4, 2017, 1:28pm

I think ,but not tested, you would have to resort to a combination of old Javascript like key.on, + a class on the input on ionic-input or so. Another possible solution is using native Angular input and forms values like .dirty state, it works perfectly in Ionic.

https://docs.angularjs.org/api/ng/type/form.FormController

diegobill · June 4, 2017, 2:12pm

Hi FrancoisIonic,

Thanks for the anwser, but can you show a sample code with your Idea? I did
not understand How to do this. I am using the directive form and HTML tag
input, How can I use Native angular input and forms value to fix this
problem?

FrancoisIonic · June 4, 2017, 2:21pm

Do you use Ionic V2? (not just an idea, it’s coded)

ok on the HTML validation

        <form [formGroup]="accountForm" (ngSubmit)="updateAccount()">
          <ion-item>
            <ion-label floating>Prénom</ion-label>
            <ion-input type="text" [(ngModel)]="myAccountObjectValues.accountFirstName" formControlName="accountFirstName" required></ion-input>
          </ion-item>
          <ion-item *ngIf="!accountForm.controls.accountFirstName.valid && (accountForm.controls.accountFirstName.dirty || submitAttempt)">
              <p>Merci d'entrer un prénom de 3 lettres au moins, par exemple Luc, sans chiffres.</p>
          </ion-item>

Using FormGroups and Validators on the .Ts file, it uses french error messages, sorry i’m french and didn’t translate that part yet:)

This is kinda advanced form validation, because as long as the input is invalid, but only when someone type something, it will show the error message in async.

And this is definetely ionic V2++ guys, sorry I didn’t mean to troll your topic, I answered a question.

diegobill · June 4, 2017, 2:47pm

I am using ionic v1. Is this solution Works with v1?

diegobill · June 4, 2017, 5:11pm

In some inputs on the form the scroll works and centralize the focus, but
in other inputs like this below not:

Diego Felix de Almeida
+556183798073