Android keyboard issue

[ansarizafar]

I am using latest version 0.1.17 meteor-ionic when I select a test field the app only shows a white screen on android. Is there any solution available?

[staksa]

Hi @ansarizafar can you take a look at this https://github.com/meteoric/meteor-ionic/issues/89? Maybe that will help you out.

[ansarizafar]

@arekom #89 does not provide any solution. I am looking for urgent help, I can't even login to my production app from android because of this issue.

[alexiri]

This is also a show-stopper for me.

[glemiere]

I have exactly the same problem. I tryed to use meteor add cordova:com.ionic.keyboard@1.0.4 with cordova.plugins.Keyboard.disableScroll(true); and it didn't work. When I try to console.log(cordova.plugins.Keyboard.disableScroll(true)); : the result is "undefined". I also tryed to implement this file https://github.com/meteoric/meteor-ionic/blob/master/components/ionKeyboard/ionKeyboard.js. But it didn't work too.

I really don't know how to solve this problem... If I find a solution, i'll come back to give it to you.

[anggaranc]

I also found same problem

[anggaranc]

I add plugin cordova:com.ionic.keyboard try this but the content scroll to top on android

  window.addEventListener('native.keyboardshow', keyboardShowHandler);
  function keyboardShowHandler(e){
    $('.content.overflow-scroll').each(function (index, el) {
      // $(el).data('ionkeyboard.bottom', $(el).css('bottom'));
      $(el).css({bottom: 0});
    });
  }

[ansarizafar]

It seems that there is no solution to this problem. If I abandon meteor-ionic, then please suggest which mobile ui framework I should use for my app.

[nickw]

Guys, I don't have time to look at this right now, but it should be pretty easy to troubleshoot / diagnose:

1- Clone the repo into your app's packages directory:

$ cd yourApp/packages
$ git clone https://github.com/meteoric/meteor-ionic.git meteoric:meteor-ionic

2- Try removing the com.ionic.keyboard dependency (https://github.com/meteoric/meteor-ionic/blob/master/package.js#L8-L10). What happens?

3- Add com.ionic.keyboard back in, and try removing these lines: https://github.com/meteoric/meteor-ionic/blob/master/components/ionKeyboard/ionKeyboard.js#L47-L49. What happens?

[glemiere]

Awesome ! Removing com.ionic.keyboard dependency worked very well for me ! Thank you !

[PolGuixe]

Same problem here.

[carnec]

Had the same problem, removing com.ionic.keyboard dependency fixed it!

[PolGuixe]

@nickw Will this be fixed in a coming release?

[nickw]

Well, removing com.ionic.keyboard is only a temporary fix. com.ionic.keyboard is necessary for the UI and keyboard to interact the way users are accustomed to native apps behaving (specifically retaining fixed headers and footer when the keyboard is open as opposed to pushing the entire UI offscreen).

I probably won't have time to fix this until I work on an Android app that experiences this issue. In the meantime hopefully someone can step up and figure out why com.ionic.keyboard isn't playing nicely with Android.

[DenLilleMand]

So i read what u guys said, and i removed the meteoric:ionic(was i supposed to do that?), i removed the dependency for the com.ionic.keyboard after having pulled it into my packages folder, but i can't run my application because of the missing: @import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic'; @import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/ionicons';

EDIT: I restarted phpstorm, and then it worked, leaveing in the package meteoric:ionic. It feels kind of weird though, that i have the ionic in packages, and at the same time through my package system. Shouldn't these 2 conflict somehow? or am i missing some meteor geniality ?

[sferoze]

@DenLilleMand I had the same issue with the css files not being found after cloning the package into my packages directory. I went into the path and copied the folder directly into the same folder as the stylesheets and used this import:

@import 'meteoric_ionicons-sass/ionicons';
@import 'meteoric_ionic-sass/ionic';

[jonmc12]

@nickw I was debugging this issue today, running the package locally does resolve the bug as reported. I don't have to remove the com.iconic.keyboard dependency. The changes in https://github.com/meteoric/meteor-ionic/commit/55085b3800912542b41992326bd51ac468068acd alone seem to resolve once the android app is rebuilt.

However, when I tried to remove the local plugin, and install normally (remotely) via meteoric:ionic@0.1.17 in package.js, I see the following code when I debug:

You can see its missing that conditional for Platform.isAndroid(). I first installed the meteoric:iconic in early April, your commit was on March 6th. The last time version was bumped in package.js was March 3rd. So, I'm assuming when I install remote, I'm pulling that version from 3/3.

Not sure I understand why its not pulling in latest code from remote, but, perhaps re-publishing and/or bumping package version # would resolve the problem that folks are seeing on this thread. In meantime, I'm using local package install.

[pedrocatre]

Thanks @nickw and @jonmc12 Removing the if (Platform.isAndroid()) worked for me as well. It is good enough for now.

[danielfbm]

I also noticed that this fix for Platform.isAndroid is still not in the latest release of the package on atmosphere. I will explain what I did in my project to fix the issue in iOS and Android:

For iOS, sometimes even when the keyboard is already not visible, the screen still doesn't change, and the style="bottom: 260px;" for example is not removed. It is a hard issue to reproduce, but it happens once in a while. (I believe it has to do with hotcode push and cordova plugins), and so I added some validation with setTimeout on input blur to double check and remove the attribute if the keyboard is not present (not pretty but seems to be working).

Another issue is that sometimes when the keyboard shows up the input focus event is not fired, maybe not related but it might help some people that might be looking for this. I implemented according to this post to fix: https://groups.google.com/forum/#!topic/phonegap/whWeynhFfHQ

on Android I implemented the suggested fix using css as commented here https://github.com/meteoric/meteor-ionic/issues/89 but only specifically when the keyboard is open:

body.keyboard-open .platform-android .content.overflow-scroll {
  bottom: 0px !important;
}

Hopes this helps.

[Poliuk]

Had the same issue, I removed the com.ionic.keyboard dependency and it fixed the problem

[bjesus]

@danielfbm's solution fixed it for me. seems like a gentler fix than removing the com.ionic.keyboard dependency

[benjick]

@danielfbm's solution works great on Android, thank you. Anyone found a solution for iOS?

[flake]

@danielfbm Thank you for your solution it fixed the keyboard problem on android. Great

[spotla]

I have tried below solution, it worked for me.

ionKeyboard.js #L47-L49 (https://github.com/meteoric/meteor-ionic/blob/master/components/ionKeyboard/ionKeyboard.js#L47-L49) has code to return if platform is Android. I have changed that code to scroll to focused element

var keyboardHeight = event.keyboardHeight; if (Platform.isAndroid()) { scrollToFocusedElement(null, keyboardHeight); return; }

@nickw - Please let us know if this solution would cause any possible breaks.