Hey, i would like to ask about how could I scroll up to the focused input item when the keyboard is up? scroll the whole page up when entering data in a text input field.
Any help?
Thanks…
1 Like
Ahh… this age old problem again. I struggled with this forever in my own custom app. See http://calendee.com/ios-7-kills-forms-in-html5-apps/
However since switching to Ionic Framework, this issue seemed resolved. So, I was surprised you were coming across it. I checked my app again and all seems well. Then, I found a bug. If I click somewhere near the bottom of a form, the page adjusts properly. If I click in a field in the middle of the page, the page does not adjust properly and the keyboard covers the content.
Example of form with various fields selected. Note that when the lowest field is selected, the keyboard pushes up the text properly. However, when the email (about middle) field is selected, it gets covered.
So, I tried my trick again from my own framework. I added the height=device-height setting to the meta tag in the head.
Now, the keyboard issue is resolved. Unfortunately, it creates some other issues. See that the header disappears while the keyboard is showing. It’s not pretty, but it’s better than users not being able to enter data in a field.
Examples:
Clearly there is still a bug here.
Ionic Folks : BTW these screenshots also show the issue with the status bar padding not working correctly some times. I uninstalled and then reinstalled the device plugin for these shots, but that did not help this time.
I just opened a PR on this issue.
3 Likes
Cool thanks for researching this, we’ll investigate it further and come up with some fixes. Thanks.
Thank You for your reply @Calendee … trying to check it again 
i dont know if this is still an issue
but using
height=device-height
and
document.addEventListener(‘focusout’, function(e) {window.scrollTo(0, 0)});
fixed it for me
This should be a high priority item.
My solution is a hack. Using directives, on blur and focus of the text input area, I call a function which uses the scrollDelegate to scroll to the bottom of the content pane. It requires me to use $timeout for the keyboard to extend and recalculate window size, but I believe I have it working.
@omerzs, for a number of reasons, your solution won’t work within Ionic as it’s not using the framework’s built-in components. Your solution however should work within a basic webpage.
Fixed this thing yet?? The solution doesn’t work. If I use tag, the layout would be a mess because all the thing look small. Is there any perfect solution?
I’ve pinged the devs again on this. It is a nightmare problem with iOS and Android that is not specific to Ionic. We’ll see if the beta has some improvements in this regard.
Just so people know, we are actively working on fixing keyboard issues!
8 Likes
Em… i even can not reach that… I wanna how to do it
I know that Ionic Keyboard Plugin was released but I am still having problems with the keyboard obscuring inputs. I have installed the Ionic KB plugin, manually set the ionic.Platform.isFullScreen = true, etc. What should I do?
Hi Guys,
I run into this issue today as well. I run it on iPhone and accessing this as normal webpage . I have a few fields and when I get focus on the lowest one its not scrolled up and keyboard is on top of it.
But as soon as I start typing it scrolls up.
Any IDEA ? I am running latest ionic **.-12
Frank
same problem here. it scroll to the right place when i start typing
Any word on this issue? I was able to write my own using ng-focus and anchorScroll, but now the Cursor hangs in the middle of the screen! Similar to this issue.
are you using ionic keyboard plugin?
have you set correct configration:
http://ionicframework.com/docs/api/page/keyboard/
Read the android and ios notes!..
And if you have ionic javascript scrolling disabled -> it would not work.
1 Like
I am using the plugin I have set cordova.plugins.Keyboard.disableScroll(true), because of the crazy bouncing it causes in ios8. My attempt to write my own scroll to input is so close to working except for this weird cursor issue…
I am also facing the same issue. I tried disabling the native scroll, but still no use.
I can’t even scroll when the keyboard is open. It gets stuck both in iOS and android devices, which is too strange. Can some one help me on this. Because of this i can’t enter the data properly in any form.
I am using ionic v1.0.0
Same problem here.
<ion-content scroll="true" padding="false">
there are at least 10 fields in the form.
When the keyboard is show I cannot scroll the form.
To insert data in the following field I have to close the keyboard, go to the next field, and insert.
I was also facing the same issue. I have removed the overflow-scroll=true from the ion-content tag. And it solved my issue.
1 Like