Keyboard Hiding Inputs Problem

[calendee]

See this post on the forums.

http://forum.ionicframework.com/t/scroll-to-the-focused-item-input-when-the-keyboard-is-up/422

[calendee]

@ajoslin Any improvements for these keyboard problems in the beta?

[adamdbradley]

Mr. @tlancina will be working on all of the keyboard issues. He's been putting together the Ionic View app and gained a lot of experience dealing with the keyboards, so yes this is being addressed.

[rvanbaalen]

Any progress on this @tlancina @adamdbradley ? I can confirm this is also an issue on Android 4.3 (Galaxy S4).

[somethingnew2-0]

See Max's comment on #26 ;)

[adamdbradley]

@rvanbaalen I merged in the changes, would you be able to help test them out?

Related: #862 #740 #726 #691 #689 #365 #26 #1134 #1120 #1105 #1078 #772 #745

[JerryBels]

Nice ! I will upgrade :)

[seyuf]

@JerryBels, i forgot to mention, there is a bug in the v1.0.1. The scrolling is not working in natively under android v4 Lol, hopefully this will be fixed soon (T-T).

[JerryBels]

@seyuf Awww :/ There is a thread about this bug ?

[seyuf]

@JerryBels Yep #4064 the workaround is to downgrade to 1.0.0 but you will no longer be able to use native scrolling with the keyboard lol.

[ssharmass]

Hi All,
I followed your doc to get task of appear textarea over keyboard which is inside ion-footer ,but it is not working , any one has something related that, please let me know.

Thanks

[vko-online]

This is still an important issue though. Any workaround?

[alexszilagyi]

@vko-online : somehow I've managed to find a possible workaround but I must admit that there are some cases that the keyboard shows up.

Here's my config:
app.js file

angular.module('coraxApp', ['ionic', 'ngStorage', 'ngCordova', 'ngAnimate'])
  .run(function($ionicPlatform, $cordovaFile) {
    $ionicPlatform.ready(function() {
      ionic.Platform.isFullScreen = false;
})
.config(['$localStorageProvider', '$stateProvider', '$httpProvider', '$urlRouterProvider', '$locationProvider', '$compileProvider', '$ionicConfigProvider', function($localStorageProvider, $stateProvider, $httpProvider, $urlRouterProvider, $locationProvider, $compileProvider, $ionicConfigProvider) {
    $ionicConfigProvider.scrolling.jsScrolling(false);
}]);

config.xml file

  <preference name="android-windowSoftInputMode" value="adjustPan|stateAlwaysHidden" />
  <preference name="Fullscreen" value="false" />
  <preference name="KeyboardDisplayRequiresUserAction" value="true" />

[mrft]

Here is a description of my problem: https://forum.ionicframework.com/t/inputs-scrolling-and-the-onscreen-keyboard-on-android/40730

I have tried about every suggestion I found here, on stackoverflow, in the ionic forums etc.
It still doesn't work, and honestly, I don't understand why it doesn't 'just work' when you create a new skeleton app using the ionic cli and when using some simple ionic directives.

If I put everything in a simple div, it looks horrible, and I don't have a header-bar etc. but at least on the phone, the keyboard simply works as you'd expect. Now it would be nice if I could make it a bit more pleasing to the eye.

[mlynch]

@mrft I'm digging in here. Did you just create the project, of was it a few weeks ago? 1.2.4 did address some issues.

Can you try with this markup for the form input:

<ion-input>
  <ion-label>label</ion-label>
  <input...
</ion-input>

[mrft]

@mlynch I created a github repository that contains an example of my problem.

Maybe this can help improve things, and if I check your fork, I can check what the differences are between your and my version.

[mlynch]

Hey @mrft, I'm testing that template (couldn't get your demo to build and run, unfortunately), and I'm not seeing the issue. Here's a video of me testing in an emulator: http://ionic-io-assets.s3.amazonaws.com/keyboardtest.mov

So, a few things. Can you verify that what you're seeing in my video is good behavior, and that you're seeing something else in your running? Also, can you verify you're using the most recent version of Ionic to test? There were some issues in 1.2.x before 1.2.4, unfortunately.

If so, I might need to get a real device matching yours to test on, and make sure my emulator is running the right version of Android to trigger it. Or, it might have been resolved and we can go on our merry way :) Thanks so much for the help!

[mrft]

Yep I am definitely seeing something else.

Here is a video that shows the behaviour I experience

As you can see in my repo, I did update the bower.json file to use 1.2.4, renamed ionic under www.lib, and did a bower install, so afaik I am using ionic 1.2.4.

Don't hesitate to create a ticket describing your problem with building that project, because I have read so many things that could potentially influence the behaviour that if you just use the same template, we don't know if everything else is the same (ionic.project, bower.json, angular.module('myApp').run, angular.module('myApp').config, ... )

I also tested it on a more recent Motorola E running Android 5.0.2, and everything actually did work as expected.

I couldn't get an emulator to run 4.0.3 (it's still 'Booting up emulator (this may take a while)' after > 30 minutes, the Android 5 emulator I tried before did work).

[mlynch]

@mrft thanks so much for the video that really helps. If you set <ion-content overflow-scroll="false" do you still see that behavior?

Also, would be really interesting to see if crosswalk helps with that device version. Any chance of trying that?

[mlynch]

Also, being pragmatic...that version of Android as about 2.7% worldwide usage, so it might very well be an issue with that version specifically but won't really impact users (as you say, this doesn't happen on newer versions of Android):

[mrft]

@mlynch Yeah I saw that pie chart today, so I realized that maybe it is not that important, but this happened to be a smartphone that I had lying around, so my first experiences with Ionic weren't making me too happy :)

overflow-scroll="false" makes it more predictable, in that I seem to be able to tap (select) the right field always, but the blue-line surrounded input field that appears and should perfectly overlay the text to allow editing (and show the user which field he is editing) is still way off (too low, most of the time hidden behind the keyboard), so you don't know that selecting that field for editing actually worked.

I had to lookup what crosswalk was (have to do some more reading).
How is it related to Ionic?

[mrft]

@mlynch Yes I saw that pie chart today, so probably it is not that important, but since I had that phone lying around, and used it for my first-ever test with ionic, you can imagine that my first experience wasn't making me too happy, let alone confident that ionic was the way to go :)

Anyway, overflow-scroll="false" did make it more predictable, because wherever I tapped the screen seemed to actually match the field underneath it, but the blue-line input field that appears as a result of that, to show the user which field he is editing still was way off (almost always hidden behind the keyboard so you don't even know it's there). So if you type, you can only assume to which field the input will go. So, better, less frustrating, but not working 100%.

Had to google what crosswalk is, and need to do some more reading about it. How is it related to Ionic?

Thanks for your help so far!

[mlynch]

@mrft totally get that, and I hate that this was your first experience and it sucked :(

Unfortunately, the older 4.0.x phones were really inconsistent and the browser shipped with them had a number of odd issues. Thankfully, those have been addressed.

Crosswalk is basically modern chrome for web views and mobile web apps. You can see how to use it here: http://ionicframework.com/docs/cli/browsers.html

I'm going to close this for now since I can't reproduce on a supported device platform, but I'll keep tracking this in case you have more info and I'll try to get my 4.0 emulator to load (I had the same issue you had with it not booting or loading an app).

[leopiazzoli]

Thank's @mlynch - RESOLVED

<ion-input>
  <ion-label>label</ion-label>
  <input...
</ion-input>

[Hypher]

Got keyboard hiding fields issue on Android 4.2.2, ionic 1.7.14 in a form in a scrollable $ionicModal.

ionic.Platform.isFullScreen = true; did something, but still way from perfect (take 3 whole seconds to get in the right position, and sometimes scroll up the content too much showing a white rectangle between the keyboard and the content).
Can post screens if asked.

Note that in this very same modal I display 2 forms. The first is short enough to fit in the screen (no scroll) and the problem appears. The second make the content to scroll, and there is no problem, even with the bottom fields.
I added a blank div under my form to make the content able to scroll (at least the user could scroll to see the hidden inputs, which it could not do either), and it fixed the problem.

The 3 seconds delay is still an issue.

[rahul-sdei]

Where do i put ionic.Platform.isFullScreen = false; in meteor + ionic

[blacksmith77]

Found a solution here: https://stackoverflow.com/questions/32730171/ionic-footer-input-field-being-hidden-by-keyboard-in-chat-app

set "fullscreen" property to "false" in config.xml

This goes out out to anyone that's had a similar problem with the ionic footer and inputs in cordova build. If you have this preference in config.xml

The keyboard will hide the input when it's activated. If you absolutely need to see that input when typing (that was a joke) than just set it to false and it should solve the problem.

[manikandan07081995]

I need virtual keyboard for ionic browser application.Can any one help me.I am using typescript for ionic development.

[sreekanth-karini]

Just add this properties to your ionicModule in app.module.ts. works for me.

IonicModule.forRoot(MyApp, {
      scrollAssist: false, 
      autoFocusAssist: false
    })

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.