Ionic-framework: Keyboard issues (round 2)

Created on 14 Jun 2017  路  11Comments  路  Source: ionic-team/ionic-framework

v3

Most helpful comment

I have:

"cordova-plugin-keyboard": "^1.1.5",
"ionic-angular": "3.4.2",

but tabs still are visible when keyboard is active - what else should I do?

All 11 comments

The "big keyboard/input refactor" commit closed #7047 "Auto hide tabs when keyboard is open". To enable the fix I set keyboardResizes to true in the app config. However the tabs are still visible (on Android) when keyboard is open.

I tried to analyse the new platform/keyboard.ts code I found that the keyboardResizes===true adds listeners to keyboardWillShow, keyboardWillHide, keyboardDidShow and keyboardDidHide events. I cannot find that events in ionic-plugin-keyboard in Android code. So I guess the fix of #7047 works only on iOS.

You should not touch keyboardResizes, in order to fix it, native assistance is required. We will release a new keyboard plugin.

I have:

"cordova-plugin-keyboard": "^1.1.5",
"ionic-angular": "3.4.2",

but tabs still are visible when keyboard is active - what else should I do?

@manucorporat I'm experiencing issues with a chat like app (input bar at the bottom - sticky to the keyboard).

  • What about the new keyboard architecture you announced in this pull request? Is it already released or do you have any new information on that?
    https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/131

  • What keyboard plugin-in are we expected to use? The Ionic-Team offers two plugins.

  • What is the current state on all the keyboard issues? No official team member answered any of the issues in both repos.

@manucorporat any update?

If your problem is on android, thiw will help you. In the ionic config.xml, add the following lines in the platform name="android" tag.

<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge"    target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>

This will prevent the keyboard to push up everything and simple overlay the keyboard on the content. So the behaviour will be the same or similar to the ios keyboard

@Jatapiaro Your solution is not working for me.

I get the following error when trying to build the app ../platforms/android/res/xml/config.xml:139: AAPT: Error parsing XML: unbound prefix

On android, when the keyboard is open, the tabbar is superimposed with the navbar.

/* style of the tabbar element when keyboard is open */
element.style {
    top: 0px;
}

Temporary fix

  ngAfterViewInit() {
    let tabbarEl = <HTMLElement> (document.getElementsByClassName('tabbar')[0]);
    this.onKeyboardShowSubscription = Keyboard.onKeyboardShow()
      .subscribe(() => {
        if (this.platform.is('android') && this.platform.is('cordova') && tabbarEl) {
          setTimeout(() => tabbarEl.style.top = '48px', 100); // avoid superposition of tabbar and navbar
        }
      });
  }

have same issue here.
cli packages: (/usr/local/lib/node_modules) @ionic/cli-utils : 1.19.0 ionic (Ionic CLI) : 3.19.0 global packages: cordova (Cordova CLI) : 7.1.0 local packages: @ionic/app-scripts : 3.1.4-201711302144 Cordova Platforms : android 6.3.0 Ionic Framework : ionic-angular 3.9.2 System: Node : v6.11.4 npm : 3.10.10 OS : OS X El Capitan Xcode : Xcode 8.2.1 Build version 8C1002

i have try with this but not working

https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7

config: { // These options are available in [email protected] and up. scrollAssist: false, // Valid options appear to be [true, false] autoFocusAssist: false // Valid options appear to be ['instant', 'delay', false] } // http://ionicframework.com/docs/v2/api/config/Config/

is not supported with ionic 3 i guess

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pavimus picture pavimus  路  90Comments

Z3roCoder picture Z3roCoder  路  67Comments

Sturgelose picture Sturgelose  路  83Comments

marcovtwout picture marcovtwout  路  76Comments

mhartington picture mhartington  路  75Comments