Auto hide tabs when keyboard is open

[RaymondAtivie]

When the keyboard is opened in a tabs page (position=bottom), the tabs appear on top of the keyboard.

The expected behavior is to hide the tabs when the keyboard is visible

Steps to reproduce:

1. Create a starter tabs template
2. Include an ion-input in the page
3. Run it on a device and focus on the input element

Maybe a CSS class can be added to the page when the keyboard is open (.keyboard-is-open) so that the behavior can be controlled

This issue is for Ionic 2

Cordova CLI: 5.2.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS:
Node Version: v4.3.2

[mpaland]

Yeah, I assume you're under Android. The old keyboard problem...

I saw a talk on PhoneGap conf of @tlancina about the keyboard and it seems to be a pretty hard issue in general!
I can confirm that the bottom tab bar is pushed up upon opening the keyboard in my app under Android, too. But much more worse is covering input fields which are near the bottom. Tim said, one should try to avoid that, but unfortunately there are long lists to edit in my project.
I have postponed the whole keyboard topic to wait and see how it plays out in ionic.

Besides, @tlancina, is there a best practice tutorial about using the keyboard in ionic (integrating the ionic keyboard plugin, init/setting event handlers)?

[tlaverdure]

I am experiencing this issue as well.

[masimplo]

We are having the same issue in our project too. Any plans regarding this?

[covveadmin]

Hey guys, also feeling the pain - any news by any chance?

[theromis]

also need this great feature, tabs and may be even header nice to be able to hide.

[masimplo]

@jgw96 I noticed you added the enhancement label on this. Since native apps do no behave the same (moving tabs above the keyboard) and the tabs are also limit the actual content real estate to just a couple lines, especially on smaller phones, shouldn't this be consider a more serious issue?

[bvx89]

For people looking for a temporary solution, here's what I did:

TabsComponent constructor:

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

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

Inside the CSS:

body.keyboard-is-open ion-tabbar {
  display: none;
}

body.keyboard-is-open scroll-content {
  margin-bottom: 0 !important;
}

This won't work if you have multiple tabs on a page, but I guess you can select them with your CSS directly.

I'm currently running Ionic beta 11

[RaymondAtivie]

any update on this?

[RaymondAtivie]

@bvx89 Thanks.
For the sake of those on Rc0 there's a slight change on the css

body.keyboard-is-open .tabbar {
  display: none;
}

body.keyboard-is-open .scroll-content {
  margin-bottom: 0 !important;
}

No official solution yet tho

[jeanbaptistevilain]

Just to mention that enabling Fullscreen mode on Android also fixes this issue for me.
This can be done by setting
<preference name="Fullscreen" value="true" />
in config.xml, and optionally adding cordova-plugin-fullscreen if you're using a cordova android platform older than v5.0.0.

[masimplo]

Is this going to be fixed in the next version along with the rest of keyboard issues that are going to be fixed (read something stating that about keyboard issues in another thread) or has this fallen between the cracks?

[finalxcode]

@RaymondAtivie
i have same issue, Is this going to be fixed in the next version?

[helderdb]

It's not working for me in RC3.
the onKeyboardShow() is never fired...

[Majorhe]

+1， i have same issue.

Cordova CLI: 6.3.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.4.0
Xcode version: Not installed

[payneBrandon]

I have this same issue, and the workaround posted by @RaymondAtivie isn't working quite right. the tabs are no longer visible, but there appears to be a top border still visible. Anyone else have this issue? I've tried adding
box-shadow: none; border-top: none;
and still end up with the same top border visible from the tabbar. Any ideas?

[theromis]

I've solved this issue by turning ion-content option fullscreen="true"
and setting hidden style for tabbar

      var tabbars =     document.getElementsByClassName('tabbar');
      for(var i=0; i<tabbars.length; i++) {
        var node = <HTMLElement>tabbars[i];
        node.style.display = hide === true && 'none' || 'block';
      }

[payneBrandon]

I've tried this and still have the same top border showing even though the tabbar is set to display false.

[theromis]

@payneBrandon I'm hiding top bar
<ion-header *ngIf="isShowHeader()">

[payneBrandon]

My ion-tab is at the bottom, so hiding the header doesn't affect it much. I've attached a screenshot of what I'm talking about. The keyboard is shown, the tabs at the bottom are hidden, but it still appears that there is some top boarder line that stays in place if i scroll around.

[theromis]

this bar looks like a part of the form
can you share your html code?

[payneBrandon]

Finally figured it out. I didn't have to worry about a header since my tabs are on the bottom, BUT I did need to look to the footer (duh!). I applied a conditional class to the footer to hide it if the body has the keyboard-is-open class and BAM, back in business. Thanks for the help!

[theromis]

@payneBrandon good luck

[royipressburger]

Would like to see that feature as well.
Also I think that ion-footer should support visibility on keyboard open/close

[theblindprophet]

I have made a simple fix (of course not ideal). The .scroll-content has a margin-bottom of 56px, the same height has the tabs. I check for the key board:

public keyboardCheck() {
        return this.keyboard.isOpen();
}

and then attach this class to ion-content, a parent of .scroll-content:

.keyboard-open .scroll-content {
    margin-bottom: 0px !important;
}

and add this to ion-content:

<ion-content padding [ngClass]="{'keyboard-open': keyboardCheck()}">

I also hid the tabs when the keyboard is open using the same method in tabs.html:

<ion-tabs [ngClass]="{'remove-tabs': keyboardCheck()}">

.remove-tabs .tabbar {
    display: none;
}

I did this only for the page which I needed the fix.

Working in both iOS and Android.

[TechSnake]

SOLVED

this a proper solution except css marked.

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 [root]="tab2Root" tabTitle="About" tabIcon="information-circle" [tabsHideOnSubPages]="true">
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts">

[Slavrix]

nice @efnan34 , though you shouldnt need to provide it in the constructor.

[viking2917]

+1 for an official fix! The "display:none" approaches cause unacceptable flickering, and the tabs render once then disappear...looks gross and hacky. (anybody have any ideas how to get rid of the flicker? I'm not above a hack if it looks good to the user)

[Floyd1256]

Anything new regarding this issue? still waiting for an official fix before I lose hope and start implementing something that would affect the quality of the UI

[Khalid-Nowaf]

@PatrickMcD, The Lord of The Thumbs Down, just wondering have you try to quit this habit?

[cozzbie]

@viking2917 you could try the hack I suggested and try forcing the tabs height to zero. That might work. I haven't tried it yet though.

[webberig]

Unfortunately hiding the tabs with CSS will cause a number of problems. Ionic calculates a few values such as margin on ion-content and takes into account the presence of the tabs (which are hidden).

We've had to remove the solution because some positioning problems with other components occured.

[WhatsThatItsPat]

@Khalid-Nowaf I simply don't appreciate spam comments that sap time away from the Ionic team and away from the ~2000 watchers of this repo.

@Floyd1256's comment is inconsiderate spam. It adds nothing to the conversation. It is just another "plus one / are we there yet" comment which only serves to fill our inboxes.

My downvotes are attempts to nudge others toward more considerate behavior. Before commenting, we should remember that we are having a conversation with ~2000 people whose time is precious. We shouldn't treat this space as flippantly as we would a personal IM chat with friends. We should ask ourselves whether our comment will help or hinder others, whether it advances the conversation or is just noise, whether it is truly necessary to say or could better be voiced with a Github reaction, and whether it will accelerate or slow down development.

[masimplo]

There seems to be a branch addressing this issue along with some others https://github.com/ionic-team/ionic/tree/keyboard-fixes
This commit in particular looks very promising

[RicardoBer]

I do not have courage to go more than ionic v1.

I make this patch (I put in a the controller of affected view, as I only have one with this combo).

/* HACK Al mostrar el teclado el tabbar se pone encima de él en android*/
var bottom_stored=0;
window.addEventListener('native.keyboardshow', function (e) {
angular.element(document.getElementsByClassName('tab-nav')).addClass('hide');
bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('bottom');
angular.element(document.getElementsByClassName('has-tabs')).css('bottom','0px');
$scope.$apply();
});
window.addEventListener('native.keyboardhide', function (e) {
angular.element(document.getElementsByClassName('tab-nav')).removeClass('hide');
angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);
$scope.$apply();
});
/* HACK */

this works

[Jatapiaro]

In my case this only happens when I'm using android, the best solution is change a property on the android tag in config.xml

<platform name="android"> <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /> </edit-config>

Just simple add the following lines, so the android build in the AndroidManifest.xml have the adjustPan in android:windowSoftInputMode, this will cause that the keyboard overlays all the content instead of pushing the screen up.

[pablogarciamiranda]

For the approach of @Jatapiaro explained above, I have installed the following cordova plugin:

cordova plugin add cordova-custom-config

Then I have just added the following to my config.xml

<platform name="android">
    <preference name="android-manifest/application/activity/@android:windowSoftInputMode" value="adjustPan" />
    ...
</platform>

Working on Android & iOS

[martingitehi]

Here is what I did to hide keyboard dynamically:

in my TS file:

@ViewChild('foot') foo_ter: ElementRef;
  constructor(private platform: Platform, private keyboard: Keyboard) {
    this.platform.ready().then(() => {
      this.keyboard.onKeyboardShow().subscribe(() => {
        this.foo_ter.nativeElement.hidden = true;
      });
      this.keyboard.onKeyboardHide().subscribe(() => {
        this.foo_ter.nativeElement.hidden = false;
      });
    });
  }

then in my HTML file, I make a template variable called #footer which is what I am referencing in the TS above like this:

<ion-footer no-border style="padding:5%;" #footer>
  <ion-item no-lines>
   Don't have an account?
    <button ion-button style="text-align:center;" bold item-end clear no-lines clear (click)="signup()">
      Sign Up
    </button>
  </ion-item>
</ion-footer>

I hope it works for you too :-) @RaymondAtivie

[abishekg]

I gave it this way in Ionic V3. Works perfectly fine.
TS file
ionViewDidEnter() {
if (this.keyboard.isOpen())
this.showTabs = false;
else
this.showTabs = true;
}

HTML file
<ion-tabs *ngIf="showTabs" #myTabs>

[senturkhasan]

dasda

asd

[senturkhasan]

not true answer

[jayzyaj]

Is there any update on the official solution for this?

[dharapvj]

As of today.. with Ionic v
I could not get @ionic-native/keyboard to work. As many others stated.. onKeyboardShow() event never fires.
also cordova-keyboard-plugin has been deprecated.

So what worked for me was...

cordova plugin add cordova-plugin-ionic-keyboard --save

post this.. I added window.addEventListener as described in their readme

don't forget to remove the eventlistener in case you leave the tab page and come back to it again..

// MyTabs.ts
  showListener() {
    console.log('keyboard visible');
    document.body.classList.add('keyboard-is-open');
  }
  hideListener() {
    console.log('keyboard hides');
    document.body.classList.remove('keyboard-is-open');
  }


  ionViewDidEnter() {
    window.addEventListener('keyboardWillShow', this.showListener);
    window.addEventListener('keyboardDidHide', this.hideListener);
  }

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

[jayzyaj]

At first at worked for me. When I first click on an input when the keyboard is shown the tabbar was hidden. After I click on another input the tabbar has showed again. So in my case the tabbar only been hided when I click on input field at first.

Any suggestion? @dharapvj

[codymbeardsley]

Hey everyone, while it's not the same as "hiding" the tab bar, this solution worked well for me by allowing the keyboard to obscure the tab bar instead of pushing it up.

In your main config.xml, edit the android platform to include the following:

    <platform name="android">
        ...
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <activity android:windowSoftInputMode="adjustPan" />
        </edit-config>
    </platform>

What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behavior for your app.

...and if you check AndroidManifest.xml on your next build you'll see that the default of android:windowSoftInputMode="adjustResize" is changed to "adjustPan", thus allowing the tab bar to be obscured.

[Motoralfa]

@codymbeardsley Thank you so much! This solution work for me; at least for android it is a good solution. When the Keyboard is open, instead of pushing the toolbar, the keyboard just hide the footer!

[robroy92]

Works Perfect!
Thank you @codymbeardsley

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.