Click a input field. whole app jumps down and back to the original place

What seems to solve the problem is resorting to a little JavaScript since I couldn’t find a way out through HTML.
Call cordova.plugins.Keyboard.disableScroll(true); when entering the state / view and the opposite when exiting the state / view.

1 Like

Having the same issue here. Any fixes planned?

1 Like

Yeah, this can’t be normal acceptable behavior.

Here’s a screencast I just recorded of the behavior on iOS:
CloudApp

Like others, I am not seeing any issues on Android.

Ionic team…

1.) Should I file an issue for this? I looked at open issues on GitHub and didn’t see one for this, but there’s over 300 open issues so I might have missed it.

2.) Can you suggest any workarounds that aren’t as drastic as disabling native scrolling? (Or is that not a big deal? I just don’t want to negatively impact the rest of my app because of this.)

1 Like

Zarko: Please share a little code… I’m wondering how much of a hack this would be.

I opened an Issue on this:

Basic things like this should work out of the box, so yeah, you could call it a hack.
Try something like this in your controller code:

  $scope.$on( '$ionicView.afterEnter', function () {
    // Handle iOS-specific issue with jumpy viewport when interacting with input fields.
    if ( window.cordova && window.cordova.plugins.Keyboard ) {
      cordova.plugins.Keyboard.disableScroll( true );
    }
  });
  $scope.$on( '$ionicView.beforeLeave', function () {
    if ( window.cordova && window.cordova.plugins.Keyboard ) {
      // return to keyboard default scroll state
      cordova.plugins.Keyboard.disableScroll( false );
    }
  });
2 Likes

Has anyone found a better solution / has this been fixed??

Here is my issue:

I see this here but I am unsure how to implement it - is the plugin included out of the box?

1 Like

@taylorsuk - I recently had that very same issue on iOS 8 only (iOS 7 was fine). I resolved my issue only yesterday by simply disabling the native scolling (which I believe by default is set to true) at a global level for the app, calling the Cordova keyboard plugin method ‘disableScroll(true)’ without ever enabling it again. Since my app is using Ionic’s own javascript scrolling, there was no need for the native scrolling to interfere with the app.

The full code used here in the main script is given below:

$ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
          window.cordova.plugins.Keyboard.disableScroll(true);
        }
});

That was all that I had to do. Hope this helps.

1 Like

@Sayvai Does not seem to be working for me. This is the code I am using at the top of app.js

.run(function($ionicPlatform, $state, $rootScope) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

Am I missing something?

Did you ever get this to work @taylorsuk?

@rywar no still remains my only (terrible) bug I know of. I do have some modals in my app that done do it so going to compare them today and figure it out all being well.

I think it might be to do with my modal content requiring scrolling and overflow: hidden;

If I find anything I will post here.

EDIT:

I have done a little testing and so long as the keyboard does not overlap the modal then it seems to be fine, however when the keyboard pops up over the modal and then scroll and tap in a textbox then I get the horrible jump.

This is literally the last thing before submission and driving me mad!

The changes is bundle.js worked for me from this link.

Although it does scroll through the status bar - I would like that not to happen but it is 100 times better than it jumping around.

Will try the fix at the bottom of the link attached tomorrow however previously I have not had any luck with the disableScroll stuff.

1 Like

Works for me, thanks!

Hi anyone got fix for this issue. I am a contractor if i dont fix this I may loose my job. I tried all the above suggessions but none of them worked

yes i solve this issue you need to install corodva keyboard pluggin

cordova plugin add ionic-plugin-keyboard

then after in app.js

.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.Keyboard.disableScroll(true);
}
})

main thing here is

cordova.plugins.Keyboard.disableScroll(true);

:checkered_flag::checkered_flag:

do cordova plugin add ionic-plugin-keyboard --save
Note the --save
For me the issue was this plugin is not embedded for ios or android because there was no entry in config.xml
By doing --save ionic add the entry in config.xml as well.

This works for me, Thanks men

I noticed that sometimes this behavior is broken when you have the ionic keyboard plugin installed along with the cordova keyboard plugin. Just install de ionic keyboard plugin. Uninstall any other keyboard plugins.

1 Like

Solved it by removing

ionic cordova plugin rm ionic-plugin-keyboard

1 Like

Thank you Uxman!
This fixed the issue for us.