Android + Tabs + NOT full Screen + Keyboard - still having issues

Still looking into keyboard and input field issues on android. Driving us absolutely nuts for months now. Keep hoping it’s a bug and going to be fixed but never happens.

At present the problem is as follows:

Android

  1. Create new tabs app
  2. Add input field to the view
  3. Add “$ionicConfigProvider.tabs.position(‘bottom’);” to the app js appropriately
  4. Run on android and Tabs show at the bottom (great)
  5. Tap in the input box and the keyboard opens but the tabs are stuck above it
  6. DO NOT want the tabs stuck above the keyboard
  7. People say to make the app FULL SCREEN but then you lose the status bar and the bottom action bar. Not an option
  8. Other people say to hide tabs with directive / css but it’s slow and jumps about. Also not reliable as sometimes the tabs never even come back again when you close the keyboard

Also tried editing the manifest file but that has varying other issues with either fields not scrolling correctly, things getting stuck behind the keyboard etc.

At a loss now on how to just stop the tabs going up when the keyboard is open. It works if the app is full screen so no clue why it doesn’t work when NOT full screen.

Don’t suppose anyone is able to help?

i solved it like this:

window.addEventListener 'native.keyboardshow', -> document.body.classList.add('keyboard-open')

.keyboard-open .tabs{
  display:none;
}
.keyboard-open .has-tabs{
  bottom:0;
}
body.keyboard-open .has-footer{ 
  bottom: 0;
}
1 Like

The reason why I add class but never remove class is because ionic should add and remove it automatically, but I think there was a bug in one version, so I had to add it myself, while ionic would remove it once keyboard hides. I am not sure if bug is still there, so I keep above line in my code

Thanks but there is still quite a delay before it fires / updates on the view and so isn’t workable.

Hmm mine works fine here… did you install ionic keyboard?

ionic plugin add com.ionic.keyboard

I also use these settings if that is rellevant at all:

if window.cordova and window.cordova.plugins.Keyboard
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false)
  cordova.plugins.Keyboard.disableScroll(true)

Really appreciate your reply.
Can I confirm

  1. you are running a tabs based app
  2. you have the tabs at the bottom
  3. your app is NOT fullscreen
  4. you are running the app on android
  5. when you open the keyboard the tabs stay behind the keyboard

you see we have tried this with a blank / brand new tabs app and it doesn’t work.

  1. Yes
  2. Yes
  3. I do set ionic.Platform.isFullScreen = true as well as ‘window.StatusBar.styleDefault() if window.StatusBar?’ I see both bottom android controls as well as status bar.
  4. Android. 6.0 on nexus5
  5. When I open a keyboard the tabs hide very quickly (instantly without any delay)
ionic.Platform.isFullScreen = true
$ionicPlatform.ready(
  () ->
    window.addEventListener 'native.keyboardshow', -> document.body.classList.add('keyboard-open')

    try
      window.StatusBar.styleDefault() if window.StatusBar?
      if window.cordova and window.cordova.plugins.Keyboard
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false)
        cordova.plugins.Keyboard.disableScroll(true)
    catch ex
      $log.info "Cordova FAIL "
      $log.info JSON.stringify ex
    try
      $cordovaSplashscreen.hide()
    catch ex
      $log.info "Cordova FAIL "
      $log.info JSON.stringify ex
)


Thank you so much again for your time on this. We are just going to re investigate this route again. It may be that our app is using more memory /resource than yours and that is what is slowing it down perhaps.

We will try it out and see what happens on our app and then on a blank app to compare.

keep me posted, I am curious if any of my advice will help you

It looks like a slight alteration to the directive may have helped improve the situation. I’ll try and ask my co-developer to give a bit more detail on what helped once it’s confirmed solved.

Thank you! In Ionic 1.2.4 I added just the CSS portion from above to the style.css. This solved my issue of the bottom tabs display block still showing even though the tab content was hidden. I didn’t need the event listener, nor the hide-on-keyboard-open class on the tabs container.

.keyboard-open .tabs{
  display:none;
}
.keyboard-open .has-tabs{
  bottom:0;
}
body.keyboard-open .has-footer{ 
  bottom: 0;
}