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 open #89

Closed
elGusto opened this Issue Feb 19, 2015 · 15 comments

Comments

Projects
None yet
7 participants
@elGusto

elGusto commented Feb 19, 2015

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

This comment has been minimized.

Member

nickw commented Feb 19, 2015

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

@elGusto

This comment has been minimized.

elGusto commented Feb 19, 2015

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

Here with the keyboard closed:
screen shot 2015-02-19 at 17 17 27

Keyboard opened:
screen shot 2015-02-19 at 17 22 26

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

This comment has been minimized.

Member

nickw commented Feb 19, 2015

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

This comment has been minimized.

elGusto commented Feb 19, 2015

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

This comment has been minimized.

Member

nickw commented Feb 19, 2015

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

This comment has been minimized.

elGusto commented Feb 19, 2015

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

This comment has been minimized.

elGusto commented Feb 24, 2015

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:

screenshot_2015-02-24-17-00-29

screenshot_2015-02-24-16-55-04

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

This comment has been minimized.

lispur commented Feb 24, 2015

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

This comment has been minimized.

Member

nickw commented Feb 24, 2015

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 nickw closed this in 55085b3 Mar 6, 2015

@nickw

This comment has been minimized.

Member

nickw commented Mar 6, 2015

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

gabrielalmeida added a commit to biguHQ/meteor-ionic that referenced this issue Mar 16, 2015

Merge branch 'master' of https://github.com/meteoric/meteor-ionic
* 'master' of https://github.com/meteoric/meteor-ionic: (21 commits)
  Added badge color option to ionTab
  add initial slides
  typo
  backbutton warns about routes that dont exist
  Added textWrap class to item
  dont mess with the keyboard on android. should fix meteoric#89
  update README
  publish 0.1.17
  simplify current tab logic, don't use localstorage
  Added template reference to the callbacks and fixed subtitle bug
  Added check for callback to alert functionality of ionPopup
  Added prompt functionality to IonPopup
  Added confirm functionality to IonPopup
  Added alert functionality to IonPopup
  Added possibility to pass either template or html string into popup
  Added fadeout animation and functions for buttons
  Boilerplate code for popup added
  publish 0.1.16
  fix slidebar teardown
  initial slidebox implementation. closes meteoric#5
  ...
@Tarang

This comment has been minimized.

Tarang commented Apr 27, 2015

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

This comment has been minimized.

torayeff commented May 13, 2015

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

@fpoirier1

This comment has been minimized.

Contributor

fpoirier1 commented May 26, 2015

Does issue # 1 has been fixed?

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

@torayeff

This comment has been minimized.

torayeff commented May 27, 2015

@fpoirier1 this works for me for android and ios:

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

This comment has been minimized.

danielfbm commented May 27, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment