Keyboard pushes the footer (tabs) up on Android


#1

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 ?


#2

SOLVED

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';


@Component({
  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;
  valueforngif=true;

  constructor(public keyboard:Keyboard) { }
   ionViewDidEnter(){
     Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
     Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}}

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>
</ion-tabs>

#3

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?


#4

did you find a solution to this ?


#5

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


#6

try this alternative solution from github issue


#7

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


#8

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');
    document.getElementById('TabBarOpen').classList.add('keyboard-is-open');
  }
  hideListener() {
    console.log('keyboard hides');
    document.getElementById('TabBarOpen').classList.remove('keyboard-is-open');
  }

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

id="TabBarOpen"

It works for me. Both iOS and Android device


#9

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 ?


#10

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


#11

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


#12

thank you so much. it works wonderfully.


#13

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


#14

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?