bug: Keyboard pushes the whole screen up #5432

ihadeed · 2016-02-12T00:58:19Z

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.

The text was updated successfully, but these errors were encountered:

adir1 · 2016-02-15T03:59:53Z

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 · 2016-02-15T13:38:50Z

Same problem here + 1 at IOS9

vactorlao · 2016-02-15T13:40:23Z

Same issues here at iOS

damienadermann · 2016-03-04T06:13:01Z

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 · 2016-03-20T03:05:36Z

+1

Abdiliban · 2016-03-22T17:15:39Z

#5302

EvanWillms · 2016-04-10T20:45:15Z

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.

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.
A reproducible bug in scrollAssist behavior nicely documented by @hrpatidar in ION-Content Scroll is not Refreshing After Close the Keybaord #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.

nilswieber · 2016-12-15T16:33:10Z

The Issue for me is that the ion-input (type="text") is sometimes hidden behind the keyboard if you select a text ion-input that is inside an ion-item-sliding. The Content scrolls up for just a moment and then jumps into another position. So the input is hidden by the keyboard and you can enter text into the textfield but you can't see what you typed.

I've included an repository which demonstrates the issue - See: #9642

mhartington · 2016-12-15T16:59:17Z

@alexmady and @richardshergold using the sample project I have been able to solve most of these issues just by refactoring things a little bit.

The sample project had quite a bit of unneeded code, and it was not using the latest nightly (now RC4).

Here is the sample code/project

https://github.com/mhartington/KeyboardTest

It's behaving as one would expect on android.

iOS however does have issues with the input being covered.
I will investigate that further.

Thank you all for your patience with this, it is not an easy problem to solve.

alexmady · 2016-12-16T12:59:10Z

Thank you for the update @mhartington

I have just tried you example repository on iOS and it is indeed hiding the input.

Here is a gif showing the problem.

Here is another gif showing how the footer should slide up and what I believe we are all looking for:

thanks and looking forward to updates.

mhartington · 2016-12-16T15:58:58Z

Yes @alexmady, ios is proving to be problematic.
I'm able to use a user submitted keyboard attach directive for ios, but am having issues maintaining input focus when you tap the send button on the right. I will note, that tapping the return/enter key on the keyboard, everything works great. iOS seems to be willing to loose focus on inputs a bit faster than android.

nunoarruda · 2016-12-16T16:12:31Z

You guys might want to take a look at the following SO question for several workarounds or maybe for leading you into finding an ultimate solution for this issue: http://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above-the-keyboard-when-the-keyboard-shows

alexmady · 2016-12-16T16:15:45Z

thanks for the update @mhartington

Ideally we need to match the usability of existing chat apps, we need the return button for another purpose really.

Is there nothing we can do in ionic to change the behaviour of the send button so that the focus is not lost? If we were to enclose the input in a form for example, might that help with catching and preventing the loss of focus at the same time as sending the message?

alexmady · 2016-12-16T16:43:58Z

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

jourdan-jobox · 2016-12-16T17:53:20Z

Looks like there's a topic here of the Send Button closing the keyboard; I am also building a chat feature for my iOS app and want to know if this issue is one that is being looked into for RC5?

I opened this exact issue a while back, #9238

Thanks!

alexmady · 2016-12-23T10:27:08Z

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!

MvRemmerden · 2017-01-02T12:33:07Z

Is this problem already scheduled for any milestone? Would be great to know if the solution for this is near or whether investing time into finding alternatives would be worth it.

juarezpaf · 2017-01-02T15:31:07Z

@mhartington did you have any progress after your experiments #5432 (comment)

I created a sample app using ionic start ionic-tutorial tutorial --v2 after this I just included a list and an <ion-input> inside of an <ion-footer>.

The current @nunoarruda solution to change <ion-input> to <input type="text"> works just fine.

MvRemmerden · 2017-01-03T09:12:12Z

@juarezpaf It does not work. The input only appears above the keyboard after the user has started typing.

Tusharbalar · 2017-01-03T13:12:22Z

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

mhartington · 2017-01-03T14:54:48Z

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

MvRemmerden · 2017-01-03T14:59:54Z

@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 ;-)

alexmady · 2017-01-03T15:07:43Z

Ditto!

On Tue, 3 Jan 2017 at 15:00, Marcel van Remmerden ***@***.***> 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 <#5432 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGVqeiW8T0X_hk_TY_9T08BQPAG9Mzfxks5rOmKHgaJpZM4HYsIN> .

-- Kind regards, Alexander Mady

cozzbie · 2017-01-09T12:27:22Z

Check out the last SO comment. Maybe this will help.

http://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above-the-keyboard-when-the-keyboard-shows#comment65388049_38786672

MvRemmerden · 2017-01-10T02:39:17Z

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.

lincolnthree · 2017-01-10T16:22:16Z

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

MvRemmerden · 2017-01-11T07:07:43Z

@lincolnthree Sure, but actually that's all there is to it. Just paste the css code on the pages you need it and you should be fine.

You can also have a look at the stackoverflow thread @cozzbie posted (http://stackoverflow.com/a/38786672). The solution I used is currently the highest voted comment.

bruceearly · 2017-01-13T07:38:37Z

is this issue solved?

antmrdevlabs · 2017-01-13T08:11:54Z

no, not at all. facing the same issue with rc.5

we are using a footer with elastic textarea (like whats app chat)

kabus202 · 2017-01-13T14:55:52Z

It's working for me

alexszilagyi · 2017-01-19T12:17:08Z

Anyone tries to fix this on Ionic 1.x (1.7.15) ?

@wbhob: here's an UPDATE / scenario:
When tapping on the input and focus it, the keyboard overlaps the input, I want to make that the input when focused is always above the keyboard. Tried this solution but it doesn't works 😞 .

app.js - current config

    .run(function ($ionicPlatform, gettextCatalog, $cordovaFile) {
        $ionicPlatform.ready(function () {
              
            ionic.Platform.isFullScreen = false;
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard or form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.disableScroll(true);
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
        }
   }
    .config(['$ionicConfigProvider', function ($ionicConfigProvider){
        $ionicConfigProvider.scrolling.jsScrolling(!ionic.Platform.isAndroid());
    }]);

// config.xml
  <preference name="Fullscreen" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="KeyboardDisplayRequiresUserAction" value="true" />
  <preference name="android-windowSoftInputMode" value="stateHidden|adjustResize" />
  <plugin name="ionic-plugin-keyboard" version="2.2.1" src="https://github.com/driftyco/ionic-plugin-keyboard" />

Did I missed something?

wbhob · 2017-01-19T12:20:42Z

What is the error? You need to give us some more details about what happens and what you expect, and possibly open a new issue if this is separate from the topic. This also sounds like a support request and not a bug or feature, so please ask on the forum and Ionic Worldwide Slack. Thanks.

…

On Jan 19, 2017, 7:18 AM -0500, alexszilagyi ***@***.***>, wrote: Anyone tries to fix this on Ionic 1.x (1.7.15) ? app.js - current config .run(function ($ionicPlatform, gettextCatalog, $cordovaFile) { $ionicPlatform.ready(function () { ionic.Platform.isFullScreen = false; // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard or form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.disableScroll(true); cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } } } .config(['$ionicConfigProvider', function ($ionicConfigProvider){ $ionicConfigProvider.scrolling.jsScrolling(!ionic.Platform.isAndroid()); }]); // config.xml <preference name="Fullscreen" value="false" /> <preference name="DisallowOverscroll" value="true" /> <preference name="KeyboardDisplayRequiresUserAction" value="true" /> <preference name="android-windowSoftInputMode" value="stateHidden|adjustResize" /> <plugin name="ionic-plugin-keyboard" version="2.2.1" src="https://github.com/driftyco/ionic-plugin-keyboard" /> Did I missed something? — You are receiving this because you commented. Reply to this email directly, view it on GitHub (#5432 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/AEPIEhJXEmfFhtzXzJC5bChWVUTGapIlks5rT1RigaJpZM4HYsIN).

Ionitron added the v2 label Feb 12, 2016

brandyscarney added this to the 2.0.0-beta.1 milestone Feb 12, 2016

brandyscarney assigned adamdbradley Feb 12, 2016

ihadeed mentioned this issue Feb 13, 2016

bug: Screen goes black: action sheet, modal.. etc #5430

Closed

brandyscarney modified the milestones: 2.0.0-beta.2, 2.0.0-beta.1 Feb 18, 2016

adamdbradley added keyboard/focus labels Feb 23, 2016

adamdbradley modified the milestones: 2.0.0-beta.2, 2.0.0-beta.5 Feb 23, 2016

jgw96 mentioned this issue Mar 21, 2016

ION-Content Scroll is not Refreshing After Close the Keybaord #5764

Closed

hosley mentioned this issue Dec 16, 2016

Keyboard/Scroll issue njwhites/checkin#8

Closed

mhartington mentioned this issue Jan 12, 2017

Click event not fired on button in footer when keyboard is opened #9978

Closed

ionic-team locked and limited conversation to collaborators Jan 19, 2017

ionitron-bot bot added the ionitron: stale issue label Mar 26, 2018

ionitron-bot bot closed this as completed Mar 26, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: Keyboard pushes the whole screen up #5432

bug: Keyboard pushes the whole screen up #5432

ihadeed commented Feb 12, 2016

adir1 commented Feb 15, 2016

kitkimwong commented Feb 15, 2016

vactorlao commented Feb 15, 2016

damienadermann commented Mar 4, 2016

codespore commented Mar 20, 2016

Abdiliban commented Mar 22, 2016

EvanWillms commented Apr 10, 2016

nilswieber commented Dec 15, 2016

mhartington commented Dec 15, 2016

alexmady commented Dec 16, 2016 •

edited

Loading

mhartington commented Dec 16, 2016

nunoarruda commented Dec 16, 2016

alexmady commented Dec 16, 2016

alexmady commented Dec 16, 2016

jourdan-jobox commented Dec 16, 2016 •

edited

Loading

alexmady commented Dec 23, 2016

MvRemmerden commented Jan 2, 2017

juarezpaf commented Jan 2, 2017

MvRemmerden commented Jan 3, 2017

Tusharbalar commented Jan 3, 2017

mhartington commented Jan 3, 2017

MvRemmerden commented Jan 3, 2017

alexmady commented Jan 3, 2017 via email

cozzbie commented Jan 9, 2017

MvRemmerden commented Jan 10, 2017 •

edited

Loading

lincolnthree commented Jan 10, 2017

MvRemmerden commented Jan 11, 2017

bruceearly commented Jan 13, 2017

antmrdevlabs commented Jan 13, 2017

kabus202 commented Jan 13, 2017

alexszilagyi commented Jan 19, 2017 •

edited

Loading

wbhob commented Jan 19, 2017 via email

bug: Keyboard pushes the whole screen up #5432

bug: Keyboard pushes the whole screen up #5432

Comments

ihadeed commented Feb 12, 2016

adir1 commented Feb 15, 2016

kitkimwong commented Feb 15, 2016

vactorlao commented Feb 15, 2016

damienadermann commented Mar 4, 2016

codespore commented Mar 20, 2016

Abdiliban commented Mar 22, 2016

EvanWillms commented Apr 10, 2016

nilswieber commented Dec 15, 2016

mhartington commented Dec 15, 2016

alexmady commented Dec 16, 2016 • edited Loading

mhartington commented Dec 16, 2016

nunoarruda commented Dec 16, 2016

alexmady commented Dec 16, 2016

alexmady commented Dec 16, 2016

jourdan-jobox commented Dec 16, 2016 • edited Loading

alexmady commented Dec 23, 2016

MvRemmerden commented Jan 2, 2017

juarezpaf commented Jan 2, 2017

MvRemmerden commented Jan 3, 2017

Tusharbalar commented Jan 3, 2017

mhartington commented Jan 3, 2017

MvRemmerden commented Jan 3, 2017

alexmady commented Jan 3, 2017 via email

cozzbie commented Jan 9, 2017

MvRemmerden commented Jan 10, 2017 • edited Loading

lincolnthree commented Jan 10, 2017

MvRemmerden commented Jan 11, 2017

bruceearly commented Jan 13, 2017

antmrdevlabs commented Jan 13, 2017

kabus202 commented Jan 13, 2017

alexszilagyi commented Jan 19, 2017 • edited Loading

wbhob commented Jan 19, 2017 via email

alexmady commented Dec 16, 2016 •

edited

Loading

jourdan-jobox commented Dec 16, 2016 •

edited

Loading

MvRemmerden commented Jan 10, 2017 •

edited

Loading

alexszilagyi commented Jan 19, 2017 •

edited

Loading