ionic-framework: bug: Keyboard pushes the whole screen up

Still doesn’t work. Please fix this.

Hey yall, sorry for the silence, we’re just returning from holidays. This will be back on our radar.

Totally give up about this question. In fact because of keyboard issue, my company give up to use ionic. The keyboard totally break the user experience.

@jgw96 can you please reopen, this is still a problem and really needs some Ionic Dev love?

Still facing the issue too

our apps is ready to go, we do afraid our product cannot pass the store examination because of this problem, thanks anyway.

+1

For @keithdmoore @nunoarruda and anyone who needs the keyboardAttach functionality of Ionic 1, here is an Ionic 2 version of it. Let me know if it works for you! I have yet to test this on Android.

https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754

+1

+1

You guys need to more concentrate on input focus. totally frustrated I am.

+1

Hey guys, is it at least scheduled for some milestone? Would be great to know if someone is doing/planning to do something about this. 😿 Thanks in advance!

@adamdbradley Just a note, this fix (and other keyboard fixes listed in the beta.5 milestone) aren’t listed in your google doc for upcoming beta.5 milestones. I’m curious if that means it’s been scrubbed from beta.5 (I’d be very sad to hear that) or if the milestones doc hasn’t been updated? This doc: https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit Thanks!

Adding the following code worked perfectly fine for me:

.input-cover { position: static; }

I still wonder whether there will be any negative consequences, but couldn’t find any so far.

Hi @mhartington

Is there any update on this please? I am wondering if we are we on track to have the desired keyboard/chat features in the final release of ionic 2? As I’m sure you’ve guessed, it’s kind of a big deal!

By the way, if you require anything else in the way of examples/use cases for this do please let me know any I will happily put something together.

2016 has been a great year for ionic - wishing all of the team Happy Holidays!

@jgw96 @mhartington Justin and Mike when you say try it with nightly because it should have fixed the issue, how should we test it? I have an input field in a standard ionic footer and when I click on it, the keyboard moves up and hides the field. I installed the nightly build and re-built the project and it still hides the field. What’s the fix in the nightly version that we need to use? thanks

Issue is still present in RC3 (tested with conference-app and entering text in the searchbar). Bottom NavBar is still pushed up.

+1

On Tue, Nov 8, 2016 at 3:21 PM Adrian Teh notifications@github.com wrote:

+1

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/5432#issuecomment-259165278, or mute the thread https://github.com/notifications/unsubscribe-auth/AGVqeleJwPN6P2MTB2o6-uPEiTt8vMlKks5q8JOXgaJpZM4HYsIN .

Kind regards,

Alexander Mady

+1

This is still a problem. I have a background image that gets pushed up every time the soft keyboard appears, which makes the page feel very messy. Please re-open this issue, it is still not fixed.

@mhartington @jgw96 I recently upgraded from beta 11 to rc0. Huge performance improvements, thanks.

I’m also facing this keyborad issue in iOS 10. I’ll try to explain with below images.

• This is my home screen with sliding list and clicking on set alert will open a prompt AlertController requires input. Auto focus on input doesn’t work so I’ve to manually click on input box to open keyboard.

- Clicking on input box shows keyboard. Sometimes it scrolls up, sometime keyboard overlaps. Also, I can scroll screen completely which shows tabs, looks weird, isn't it?

See iOS top bar - text overlapped so can’t see time

keyboard overlapping alertController - happens mostly first time only

can scroll screen, look weird, I think on scroll, Keyboard should close and remove focus from alertController

I fixed the last issue by adding Keyboard.disableScroll(true); in my app.component.html. See http://ionicframework.com/docs/v2/native/keyboard/ for details

Let me know if this is useful or can I provide more details?

-Thanks

+1

is this issue solved?

@MvRemmerden Could you post a bit more context for your fix? E.g. On which element did you place that CSS? Thanks!

Ditto! On Tue, 3 Jan 2017 at 15:00, Marcel van Remmerden notifications@github.com wrote:

@mhartington https://github.com/mhartington Thanks a lot, we really appreciate the effort you and your team put into Ionic! Looking forward to the fix, if you need a test project or someone to try it out in different circumstances just let me know 😉

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/5432#issuecomment-270132761, or mute the thread https://github.com/notifications/unsubscribe-auth/AGVqeiW8T0X_hk_TY_9T08BQPAG9Mzfxks5rOmKHgaJpZM4HYsIN .

– Kind regards,

Alexander Mady

@nunoarruda - thanks for your input (no pun intended) on this however the suggest mention on SO do not solve the problem of the input losing focus after each message is sent. For example if you want to sent 5 messages you have to show and hide the keyboard 5 times, which is rather clunky compared to what people are used to with the way that many native apps work.

thanks @richardshergold , I’m looking into it

Here’s my footer by the way:

<ion-footer>

  <ion-toolbar class="no-border" color="white">

    <ion-input [(ngModel)]="messageText" placeholder="Write your message"></ion-input>

    <ion-buttons end>
      <button ion-button (click)="sendMessage()">
        <ion-icon name="send" color="primary"></ion-icon>
      </button>
    </ion-buttons>

  </ion-toolbar>

</ion-footer>

@jgw96 I have updated nightly and moved to angular 2.2.1 but still getting same error. Whole scroll content (including fixed div at the bottom) moves up on ion-input focus! Platforms: Android and Chrome web view

@jgw96 are you saying its only fixed for ionic 2?

is there going to fixed in RC4?

Yay Mike said they’re fixing it! Actually, in the slack, they said RC4 is all about Keyboard, so you all have that to look forward to!

@alexmady @mhartington There is a temp workaround that @EvanWillms posted back in April https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7 I modified it for RC2 and I can confirm that it works on RC2

Please note that it does not solve the issue, it solely blindly disables all the scroll features of the keyboard altogether.

@jgw96 @adamdbradley I created a short demo for this issue using the blank template, please check it out. The input doesn’t scroll up automatically and is still covered by the soft keyboard.

https://github.com/sotisoti/input_demo

My ionic info

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04 LTS 
Node Version: v5.12.0

+1

How to move fab button above keyboard like android in ios. Can anyone please help

@kitkimwong, same thing happening in my company too. @brandyscarney, Can we please get any solution for this?

+1

+1

In my poking around, there appear to be two systems interested in moving content out of the way when the soft keyboard is opened: the underlying native browser and the Ionic2 library itself.

Keyboard.disableScroll(false) (available via the “ionic-plugin-keyboard” cordova plugin) successfully stops the native browser from pushing/scrolling the content pane up and allows the keyboard to slide over and cover existing content.

Under Ionic2 defaults, however, there are additional features in place attempting to both compensate for the keyboard slideover by adding padding to the bottom of your content (‘scrollAssist’) and to keep the focused input element within the viewport by scrolling back to it (‘autoFocusAssist’). Both scrollAssist and autoFocusAssist have nicely implemented switches in config that just don’t appear to have gotten public documented yet.

With both sides’ behavior disabled, the native keyboard will slide up over existing content without any pushing or scrolling in an Ionic2 (beta.3) app deployed to both iOS 9.2 and Android 6.0. App level configuration sample is in the gist: https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7

---

@jgw96, I think there are actually two separate issues worth resolving here.

1. A communication need to help reduce the confusion that @ihadeed, @damienadermann and I stumbled into when we want to allow a native keyboard to appear without pushing or scrolling existing content, do not experience much success with the promising looking Keyboard.disableScroll(true); plugin, and run into a wall. In my mind, the solution for this is some new documentation around the scrollAssist and autoFocusAssist configuration options for us to discover and use.

2. A reproducible bug in scrollAssist behavior nicely documented by @hrpatidar in #5764 wherein a developer who does want some content pushed out of the way of the native keyboard by ionic now has padding on their <content-scroll> element that is not getting removed after the keyboard goes away and leaves a large and unwanted blank space in their scrollable component.