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

ionic-v1
1

hey there,

i have a weird problem with input fields. in started with cordova 3.6 and ionic beta 13. when i click on a input field… the whole app (including the header) jumps down and back up to the original position (top:0). if the input field is more to the bottom… the jumping gap gets bigger. anyone faced the same issue or has an idea what occurs that problem?

many thanks,
michael

2 Likes
2

Haven’t seen that exact issue, but you might want to see this :

http://ionicframework.com/docs/api/page/keyboard/

In particular, cordova.plugins.Keyboard.disableScroll(true)

3

that does work many thanks.

but if i have a select input field it is underneath the keyboard. what can i do in that specific case?

4

When the keyboard is up, you should be able to scroll to the next input you want to put info in. If necessary, you can autofocus that one input too and Ionic should automatically scroll to it.

If that’s not working, you’ll probably need to put up a CodePen sample for us to take a look at.

FYI : My personal advice is to NEVER have an input below where the keyboard will be. I’ve fought this battle too many times and failed - not sure how succesful others are at it. If you’ve got a long form, I’d suggest breaking it up with multiple views or cards.

http://calendee.com/2014/01/17/use-cards-in-ionic-for-mobile-form-goodness/

5

how can i put an autofocus on the select input? no… the form is not too long. 6 input fields from where three are select inputs. and there i can move the content above the keyboard. but that autofocus sounds interesting.

6

Turns out autofocus is pretty flaky in general.

Check out this solution from @mhartington : Auto-focus Textbox while template loads

7

It looks like a bug or something. You might have a form with some more input fields and the user should be able to scroll and not experience any application “jumps” while going from one input field to another. I’ve tested both on iPhone 5 ( with iOS 8 ) and Nexus 5 ( Android 4.4.4 ) and the jumping happens only on the former.
This is really code out of the box.

Used beta 13 and the latest stable Cordova version.

( To test on device you can start by doing: ionic start jump-test http://codepen.io/anon/pen/ExHti )

8

hey there. exactly… if i open the code pen on my phone it also jumps there if i select a specific input field. this definitely not happen in the beta 10 with cordova 3.3. since i updated… i have this issue.

i think the autofocus is also not really an option as the user has to change their selves to a new input field.

anyone else that figured out that issue/bug with forms and input fields?!?!

thanks in advance

9

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
10

Having the same issue here. Any fixes planned?

1 Like
11

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
12

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

13

I opened an Issue on this:

14

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
15

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
16

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

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

18

Did you ever get this to work @taylorsuk?

19

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

20

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