Keyboard pushes the footer (tabs) up on Android

Hi everyone,

On Android, when an input is focused, the footer (or the tabs) is sticking above the keyboard.

How do you deal with this ? Manually hide it with the onKeyboardShow() method ?


Hello everbody.I have been trying to find a solution except css marked.It took 2 days and nigths i did like this

 import { Component } from '@angular/core';
import  {Keyboard} from 'ionic-native'
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

  templateUrl: 'tabs.html'
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor(public keyboard:Keyboard) { }

this my tabs.html

     <ion-tabs *ngIf="valueforngif">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" [tabsHideOnSubPages]="true"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>

I tried this but whenever I try to click on an input field on a different page. It returns me back to the rootpage. Any suggestions?

1 Like

did you find a solution to this ?

1 Like

hey I tried this way but I kept on getting redirected to the home page ? any ideas how I should fix this ?

1 Like

try this alternative solution from github issue

not sure how I would make it work for that particular case though.

Try this in your tabs.ts

ionViewDidEnter() {
    window.addEventListener('keyboardWillShow', this.showListener);
    window.addEventListener('keyboardDidHide', this.hideListener);
    if (localStorage.getItem('token') === null) this.nav.setRoot("LoginPage")
      // remove the event listener when something goes wrong in your token or session
    // }

  ionViewWillLeave() {
    window.removeEventListener('keyboardWillShow', this.showListener);
    window.removeEventListener('keyboardDidHide', this.hideListener);

  showListener() {
    console.log('keyboard visible');
  hideListener() {
    console.log('keyboard hides');

and in your tabs.scss

.keyboard-is-open .tabbar {
    display: none;
  .keyboard-is-open scroll-content {
    margin-bottom: 0 !important;

and put this id on your or class whatever you prefered


It works for me. Both iOS and Android device


hey thanks for your reply , I don’t understand what you mean by putting id=“TabBarOpen” on your class ? where exactly does it need to go ?

also what’s the type of nav when you say this.nav.setRoot ?

put the id=“TabBarOpen” on your <ion-tabs> and the navs is this

thank you so much. it works wonderfully.

Thanks, this was the only solution that worked properly on my app.

This is preventing the ion-tabs from sliding up with the keyboard, however, when the keyboard is closed and the ion-tabs show again, the tabs then cover up the bottom portion of the screen. I have a FAB on the bottom, and the tabs are covering it, preventing me from hitting it. Is this happening for anyone else?

it works but giving me white space above keyboard…any solution