Soft keys in Android obscure the bottom of ion-content

ionic.version
"1.2.4-nightly-1917"
window.device.cordova
"4.1.1"

I have my app set to to <preference name="Fullscreen" value="true"/> and have ionic.Platform.isFullScreen = true; in the platform ready function. I’ve reverted to js scrolling because of this issue.

After opening the soft keyboard and then closing it again, the bottom of the ion-content is obscured by Android soft keys (back / home / app switching). My app is fullscreen when opening it, the soft keys go away. Additionally, if I switch to another application and back to my app, the soft keys go away.

This is a huge problem because the soft keys cover the “Save” button.

See screenshots below:


This issue is also frustrating me. It means you can’t run your app in fullscreen if it uses the keyboard, as the status bar and soft keys re-appear when closing the keyboard.

I’ve tried earlier versions of Ionic (1.2.1 and 1.2.4) and the latest nightly build (currently 2775) but they all behave the same way with the keyboard in fullscreen mode. The same behaviour occurs with the sample apps, which I’ve tested on Android KitKat and Marshmallow.

If anyone else is experiencing this or has a workaround it would be most appreciated.

Thanks,
Ronny

I think this could have something to do with the update in the ionic keyboard plugin. I’ve experienced it since I updated it. Really annoying since it prevents me to update to the play store because of this bug.

a scenario where it prevents the app to work correct is with the action sheet.
First you have to fill in some input. Then after that choose an action from action sheet.
The softkeys that appeared after the keyboard showed will prevent you from seeing or choosing the lowest option. This is a deal breaker for me if I were to update it.

I had the same problem on a nexus 7. I fixed the problem using Immersive Mode: https://developer.android.com/training/system-ui/immersive.html

Add StatusBar.hide() to run:

 .run(function($ionicPlatform) {
  $ionicPlatform.ready(function() { 
    if (window.StatusBar) {
		StatusBar.hide();
    }
...

In platforms\android\src\org\apache\cordova\statusbar\StatusBar.java
Change

int uiOptions = window.getDecorView().getSystemUiVisibility()		
		| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_FULLSCREEN;

To

 int uiOptions = window.getDecorView().getSystemUiVisibility()		
		| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
		| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
		| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
		| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
		| View.SYSTEM_UI_FLAG_FULLSCREEN
		| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
2 Likes

The location of the file for me was at:

platforms\android\app\src\main\java\org\apache\cordova\statusbar\StatusBar.java

However, it only worked when I also added the android-full-screen plugin.

Thanks