Keyboard pushes the footer (tabs) up on Android

Ionic Framework ionic-v3
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 ?

image
Capture d’écran 2017-01-13 à 15.12.10.png876×1382 87.7 KB

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>
2 Likes
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?

1 Like
4

did you find a solution to this ?

1 Like
5

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

1 Like
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

4 Likes
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?

15

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