Auto Hide tabs when keyboard is open in Ionic2

Ionic Framework ionic-v3
1

How can i hide my tabs (bottom positioned) when the keyboard is open.

This should be a default behaviour
Im using typescript inoic2

2 Likes
2

At the moment, this functionality isn’t built in. Could you open an issue so we can discuss this on github.

3

Done

4

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

nice @techsnake , though you shouldnt need to provide it in the constructor.
and when you hide the ion-tabs via ngIf you loose the root also so the page gets lost.

6

What s your suggestion where do i put these two line code ?

Thanks

7

I changed ngif to hidden attr i seems work nice

8

Can you place the complete code? I am having the same problem and when implementing your solution, when the keyboard is appearing the screen is black and does not let me do anything.

9

so you don’t get a flicker on that solution? in my app the tabs appear for a split second above the keyboard since it seems that the onKeyboardShow() method only triggers when the keyboard is fully visible which is too late because then the tabs have already shifted. this is an unacceptable hack. the ionic team should provide a better method.

10

i am getting a whitescreen when applying that solution…

11

Late to the party but got this working…

Note: I only have one set of tabs in my app

1. Install the Ionic Native keyboard

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install --save @ionic-native/keyboard

See docs: https://ionicframework.com/docs/native/keyboard/

2. Followed pretty much the fix here:

app.component.ts
import keyboard

import { Keyboard } from "@ionic-native/keyboard";

add to constructor

public keyboard: Keyboard

inside platform.ready: add and remove class based on whether the keyboard is open or closed

this.platform.ready().then(() => {
    this.keyboard.onKeyboardShow().subscribe(() => {
      document.body.classList.add('keyboard-is-open');
    });

    this.keyboard.onKeyboardHide().subscribe(() => {
      document.body.classList.remove('keyboard-is-open');
    });
});

app.scss
add styling logic to hide and show the tabs based on the class ‘keyboard-is-open’ is present

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