bug: Keyboard pushes the whole screen up

[ihadeed]

Type: bug

Ionic Version: 2.x

Platform: ios 9 webview

My code has a <ion-toolbar position="bottom"> with a text input inside of it. When I try to type something in there on iOS the whole page gets pushed upwards by the keyboard.

[adir1]

Seeing the same issue in our app on iOS only. On device it always seems to happen, but in iOS emulator it only happens every other time or so. I am actually on ionic 1.7.14

[kitkimwong]

Same problem here + 1 at IOS9

[vactorlao]

Same issues here at iOS

[damienadermann]

if(window.cordova && window.cordova.plugins.Keyboard) {
  window.cordova.plugins.Keyboard.disableScroll(true);
}

fixed a similar issue for me. It might help. I also had to install the cordova and ionic-cordova typings.

The keyboard doesn't move up with the keyboard though

[codespore]

+1

[Abdiliban]

https://github.com/driftyco/ionic/issues/5302

[EvanWillms]

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.

[jgw96]

@EvanWillms Hello! Thanks for doing some more research on this issue! So as you can see, this issue, and a couple of the other ones that you commented on have been marked for the beta.5 milestone. We just released beta.4 (yayyy!) so we are currently moving on to beta.5. This means that, at this point, you can expect this issue fixed in the next release of Ionic 2. Thanks again!

[knsrky]

same problem on android

[layton-glympse]

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

[keithdmoore]

Is the keyboard-attach feature part of this or a separate issue altogether? Would it be as easy(relatively speaking) as taking the v2 keyboard-attach directive and converting it into a v2 directive? I believe @mhartington had suggested that previously.

[nunoarruda]

@ihadeed I have a chat-like app that also uses ion-toolbar with position bottom with an ion-input inside. How are you handling "keyboard attach" so the toolbar "flows" with the keyboard on input focus?

I did found a solution but I'm not happy with it: https://forum.ionicframework.com/t/keyboard-attach-in-ionic-2/49635

[ihadeed]

@nunoarruda here is how I implemented it:

<ion-toolbar position="bottom" light>
    <form (submit)="addTask()">
        <ion-item no-lines>
            <ion-input placeholder="Add a new task" [(ngModel)]="taskToAdd"></ion-input>
            <button (click)="addTask()" item-right clear>
                <ion-icon name="add" lightgreen500></ion-icon>
            </button>
        </ion-item>
    </form>
</ion-toolbar>

[nunoarruda]

@ihadeed thanks for trying to help but that's just markup. I was talking about if/how you programmatically fixed the "keyboard attach" issue

[ihadeed]

Using that markup outside the ion-content tag solves the problem for me.

@ihadeed https://github.com/ihadeed thanks for trying to help but that's just markup. I was talking about if/how you programmatically fixed the "keyboard attach" issue

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic/issues/5432#issuecomment-218032368

[nunoarruda]

@ihadeed Hum, weird. I am using the code outside ion-content, that's actually where it is supossed to be, but when I focus the ion-input it still stays behind the keyboard. Thanks anyway

[ihadeed]

Can you provide me with the full markup of your page? I might be able to spot a difference between yours and mine. On May 9, 2016 9:12 PM, "Nuno Arruda" notifications@github.com wrote:

@ihadeed https://github.com/ihadeed Hum, weird. I am using the code outside ion-content, that's actually where it is supossed to be, but when I focus the ion-input it still stays behind the keyboard. Thanks anyway

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic/issues/5432#issuecomment-218033863

[nunoarruda]

@ihadeed check https://forum.ionicframework.com/t/keyboard-attach-in-ionic-2/49635

Also here's a plunker: http://plnkr.co/edit/AwJiEYptJo9g3stYaNqZ?p=preview

[ihadeed]

I saw that. I meant I wanted to see the whole page's markup not just the toolbar. On May 9, 2016 9:15 PM, "Nuno Arruda" notifications@github.com wrote:

@ihadeed https://github.com/ihadeed check https://forum.ionicframework.com/t/keyboard-attach-in-ionic-2/49635

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic/issues/5432#issuecomment-218034328

[nunoarruda]

@ihadeed yeah, sure. check the plunker

[jgw96]

Hello all! Is this still an issue with Ionic 2 beta.10? Thanks!

[vactorlao]

Yes, this is still an issue with beta.10

[John0x]

Still doesn't work. Please fix this.

[haroondilshad]

I'm still facing this issue

[alexmady]

Still facing the issue too

[jthk]

+1

[keithdmoore]

+1

[kitkimwong]

This really a huge problem because it is require by many chat apps. I expect this problem can be fixed as soon as possible. Much thanks for ionic team :) .

[chocolei]

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

[jalef]

Yes, still an issue, and for me it happens on android and in screen that uses flex

[masimplo]

+1

[jgw96]

Hello all! Found out yesterday that there is a new api that is coming in chrome https://github.com/WICG/ViewportAPI that is going to help tremendously with this issue! Thanks for the patience everyone!

[vactorlao]

+1

[royipressburger]

I'm Also having this issue with <ion-content fullscreen> I have a background image on ion-content and the keyboard pushes the image up

[s4frul]

Hi.. I'm also facing the same thing where the issue is:

• there have a gap after keyboard is closed (the gap size is equal to keyboard size).

And I'm was try my luck using simple fix by adding:style="height:90% !important;" into <ion-content> tag.. And its working fine now.. :)

Another alternative is by modified the code like this:

window.addEventListener('native.keyboardhide', keyboardHideHandler); function keyboardHideHandler(e){ var keyBoardGap = document.querySelector("#chatContainer"); keyBoardGap.classList.add("heightForce"); keyBoardGap.classList.remove("heightForceUp");
}

window.addEventListener('native.keyboardshow', keyboardShowHandler); function keyboardShowHandler(e){ var keyBoardGap = document.querySelector("#chatContainer"); keyBoardGap.classList.remove("heightForce"); keyBoardGap.classList.add("heightForceUp"); }

CSS:

.heightForce { height:90% !important;} .heightForceUp {height:55% !important;}

Hope this helps others :)

[marutifh]

No solution yet for this?

[nnixaa]

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!

[Manduro]

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

[kabus202]

+1

[tobiasfiechter]

We're facing the same issue, there's still no solution for it?

[shqyang]

any solution for this question,Anyone knows?

[kitkimwong]

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.

[marutifh]

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

[alexmady]

Maybe there is hope from the recent Ionic creator email:

More Recent Updates [image: tada]

• The "Container" Component was added. Great for things like putting other components inside an ion-scroll. Tutorial on building a Firebase Chat App next week using this!

its very frustrating though that we don't have any response from the team tho.

Come on Ionic :)

On Thu, Sep 22, 2016 at 6:17 AM Maruti Hulikatti notifications@github.com wrote:

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

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

Kind regards,

Alexander Mady

[mhartington]

Hey yall, sorry for the radio silence. We've been focusing on getting beta 12 finished and testing. So looking over the issue, it's not 100% clear on what issue is or how to recreate it. Any examples that are mentioned are no longer valid as they use older versions of ionic and older markup.

Would someone please clearly describe the issue and following our github issue template. https://github.com/driftyco/ionic/blob/master/.github/ISSUE_TEMPLATE.md

If possible, a small isolated demo always helps.

[mourice]

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

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[kitkimwong]

So sad to heard that it is no any solution provided by ionic2, but good news to see that there is a good approach to problem solving is done by @Manduro using padding , disablescroll and observable, just like ionic1.

Anyway, good news.

[tobiasfiechter]

Yes still having problems with rc0

[aggarwalankush]

@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