Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard Hiding Inputs Problem #365

Closed
calendee opened this issue Jan 6, 2014 · 63 comments
Closed

Keyboard Hiding Inputs Problem #365

calendee opened this issue Jan 6, 2014 · 63 comments
Milestone

Comments

@calendee
Copy link

calendee commented Jan 6, 2014

See this post on the forums.

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

@ghost ghost assigned mlynch Jan 17, 2014
@adamdbradley adamdbradley assigned ajoslin and unassigned mlynch Feb 4, 2014
@adamdbradley adamdbradley assigned adamdbradley and unassigned ajoslin Feb 26, 2014
@adamdbradley adamdbradley modified the milestone: 1.0 Beta Mar 3, 2014
@adamdbradley adamdbradley assigned ajoslin and unassigned adamdbradley Mar 3, 2014
@calendee
Copy link
Author

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

@adamdbradley
Copy link
Contributor

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.

@adamdbradley adamdbradley modified the milestone: 1.0.0-beta.2 Mar 26, 2014
@rvanbaalen
Copy link

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

@somethingnew2-0
Copy link

See Max's comment on #26 ;)

@adamdbradley
Copy link
Contributor

@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
Copy link

Nice ! I will upgrade :)

@seyuf
Copy link

seyuf commented Aug 3, 2015

@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
Copy link

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

@seyuf
Copy link

seyuf commented Aug 3, 2015

@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
Copy link

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
Copy link

This is still an important issue though. Any workaround?

@alexszilagyi
Copy link

@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
Copy link

mrft commented Jan 9, 2016

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
Copy link
Contributor

mlynch commented Jan 9, 2016

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

@mlynch mlynch reopened this Jan 9, 2016
@mlynch mlynch added this to the 1.2.5 milestone Jan 9, 2016
@mrft
Copy link

mrft commented Jan 9, 2016

@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
Copy link
Contributor

mlynch commented Jan 10, 2016

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
Copy link

mrft commented Jan 10, 2016

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
Copy link
Contributor

mlynch commented Jan 10, 2016

@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
Copy link
Contributor

mlynch commented Jan 10, 2016

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):

screenshot 2016-01-10 10 03 00

@mrft
Copy link

mrft commented Jan 10, 2016

@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
Copy link

mrft commented Jan 10, 2016

@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
Copy link
Contributor

mlynch commented Jan 10, 2016

@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).

@mlynch mlynch closed this as completed Jan 10, 2016
@leopiazzoli
Copy link

Thank's @mlynch - RESOLVED

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

@Hypher
Copy link

Hypher commented May 12, 2016

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
Copy link

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

@blacksmith77
Copy link

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
Copy link

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

@sreekanth-karini
Copy link

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

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

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 1, 2018

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 1, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests