Keyboard open

[elGusto]

I am experiencing a problem with the keyboard, when open, my content div is offset from the bottom to the height of the keyboard.

This produces a big gap between the keyboard and the content div as if the viewport of the screen was not changed. But it is!! So the content div's height is reduced to a few pixels if any.

It's probably a problem of the cordova keyboard plugin version ?

[nickw]

Which version of meteor-ionic are you running? Can you post a screenshot or some template code?

[elGusto]

I'm running meteor-ionic@0.1.14 (changed to 15 for the kicks)

Here with the keyboard closed:

Keyboard opened:

You can see in the screenshot that the height of the view div is adjusted already when the keyboard is opened, so the bottom css that is attached to the content div is not needed anymore (in my case).

Everything was ok until today when meteor updated my cordova plugins (I think).

[nickw]

Hmm, is that in Chrome's emulator? The content area is supposed to shrink to make room for the keyboard, that is expected. However I'm not sure why you aren't seeing a keyboard?

[elGusto]

I am testing my app on a physical device and inspecting with chrome's device inspection tool. The screen that you see is a mirror of my phone's.

It's like the whole app is resized for the keyboard to appear under it's container. The blank space that you see, is the bottom offset and my content div's height is reduced to 0px

[nickw]

It's like the whole app is resized for the keyboard to appear under it's container.

Correct, that's the intended behavior. Without that the entire web view gets pushed up off the screen, pushing your fixed headers and other content out of view. This technique keeps everything in place, but shrinks the size of the viewport. This is the way Ionic and native apps work as well.

However I've only recently implemented this feature, and have only tested it on forms inside of modals - and only on iOS, so perhaps you've discovered a bug that I haven't.

I'm still not 100% clear on the issue you are experiencing. In the second screenshot why is the device smaller? Where is the keyboard?

[elGusto]

I am out for the moment, but I will research the issue and come back with more explanations asap.

Thanks a lot for the support, it's really appreciated.

[elGusto]

There is a lot of problems with the current implementation of the keyboard (like re attaching the focusin listeners on each keyboard.show - remove them on hide?)

I have been trying to port the ionic keyboard.js but it's taking a lot of time...

Here are the problems I have right now with a really simple app:

On the IOS simulator:

If the input that is clicked on is already correctly positioned (above the zone where the keyboard appears), then everything is fine: the input is focused, keyboard appears and I can type and see what I type.

If the input is positioned where the keyboard appears: The input is not focused (typing won't write anything inside it), therefore it is not scrolled back into view and clicking in the content of the app doesn't make the keyboard disappear (possibly a bug of the simulator, it was fine at some point).

On my android device

Already, there will be differences on the adjustment of the viewport depending if the cordova "Fullscreen" preference is set to true. By default, setting "Fullscreen" to true will cause the viewport not to resize when the softKeyboard appears, it will overlay the app container. Setting it to false will make the app container resize. I didn't find any solution to check for supporting both possibilities.

Then having the "Fullscreen" preference set to false (it is the default value when building if not set), this happens:

The content div is squeezed up because the bottom offset of the size of the keyboard height like I tried to explain in the previous comments.

Reading through the ionic code, I noticed that they were delaying some operations because of this viewport change delay, but all in all, it is pretty confusing because the behaviour of the app changes depending on things out of my reach (sometimes all is good with ios).

But my biggest concern is that no one else seems to be experiencing the problems listed above. So I created a simple app repo with the exact code I have problems with: https://github.com/elGusto/kbtest

[lispur]

To ease your mind I am having those issues too. I have been watching this to see how resolves. If you need me to do anything to help I would be willing to do anything that I can.

[nickw]

Hmm, can you break these out into 2 separate issues - since they appear to be unrelated?

Here's how I'm understanding it:

Issue # 1: iOS inputs don't scroll into view if they are below the keyboard

This seems like a quick fix using setTimeout

Issue # 2: Android keyboard pushes the entire UI out of view

This seems like an issue of just getting the Cordova settings right or something. Have you looked to make sure it's not an issues with the Ionic Cordova Keyboard plugin? There seems to be several open issues related to Android there.

[nickw]

@elGusto @lispur I was just testing Android and experienced this myself. I disabled all the keyboard detection stuff on Android and it seems to work fine, so maybe it was only necessary on iOS.

[Tarang]

If it helps this sorted the issue out for us (on Android):

.content.overflow-scroll {
bottom: 0px !important;
}

The keyboard seems to intentionally add some displacement to the div but this should cancel it out.

It does feel a bit unnatural though. Native apps have some movement behind the keyboard.

[torayeff]

@Tarang thanks. That works on ios and android, just have checked on physical devices.

[fpoirier1]

Does issue # 1 has been fixed?

Issue # 1: iOS inputs don't scroll into view if they are below the keyboard

[torayeff]

@fpoirier1 this works for me for android and ios:

.content.overflow-scroll {
bottom: 0px !important;
}

[danielfbm]

@torayeff this fix works, but sometimes the input could be displayed behind the keyboard on iOS, which is not very nice. Also I want to make sure that it only does that for android and only when the keyboard is open so I changed to this css

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

@fpoirier1 for issue #1 I fixed using the solution proposed here https://groups.google.com/forum/#!topic/phonegap/whWeynhFfHQ with touchstart event on input fields. The downside is that even when users are scrolling it will force focus in the field, but this is a price that I am willing to pay for now.