ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.94k stars 13.52k forks source link

Keyboard issues (round 2) #12042

Closed manucorporat closed 5 years ago

manucorporat commented 7 years ago
gregd commented 7 years ago

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.

manucorporat commented 7 years ago

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

kamilpatyk commented 7 years ago

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?

tobiasmuecksch commented 7 years ago

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

kitkimwong commented 7 years ago

@manucorporat any update?

Jatapiaro commented 6 years ago

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

antoine92190 commented 6 years ago

@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

youssmak commented 6 years ago

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
        }
      });
  }
ghost commented 6 years ago

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 ionic-angular@2.0.0-beta.2 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

ionitron-bot[bot] commented 5 years ago

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!

ionitron-bot[bot] commented 5 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/16