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?
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.
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.
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.
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?!?!
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.
Here’s a screencast I just recorded of the behavior on iOS:
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.)
@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:
@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!