Ionic-framework: Auto hide tabs when keyboard is open

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)?

I am experiencing this issue as well.

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

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

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

@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?

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

any update on this?

@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

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.

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?

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

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

+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

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?

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

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

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

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.

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

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!

@payneBrandon good luck

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

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.

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

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

This is causing my keyboard to close automatically upon opening it... Is this due to the focus returning to the tabs to hide them which in turn makes the keyboard close?

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

@bvx89 Your solution is the only one I could get to work with Ionic 2.1.0. There is a bug logged for ionic-native and changes not being detected so the other work arounds didn't work for me. Looking forward to an official fix for this

I'm having the same problem @Killmore
isn't there any official solution to this yet?

Hello
The solution above runs on Ionic 2.1.0 as well but a better result [hidden] attrb can used in stead of *ngif.I m using this solution at my project it works fine

Have a nice day

Above will cause a flicker on some android devices and really is a bad option.

This will Work .. try this

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(window).resize(function() {
// Control landscape/portrait mode switch
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// Check if the available height is smaller (keyboard is shown) so we hide the footer.
if (document.documentElement.clientHeight < originalHeight) {
$('.footer').hide();
} else {
$('.footer').show();
}
});

This is how i solved this issue:

tab.ts

import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Events, Tabs } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor(private elementRef: ElementRef, private renderer: Renderer, private event: Events) {

  }
  ionViewDidLoad() {
    let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
    this.event.subscribe('hideTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', 'none');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.mb = content.style['margin-bottom'];
      this.renderer.setElementStyle(content, 'margin-bottom', '0')
    });
    this.event.subscribe('showTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', '');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
    })
  }
  queryElement(elem: HTMLElement, q: string): HTMLElement {
    return <HTMLElement>elem.querySelector(q);
  }
}

specific page.ts

import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private event: Events, private keyboard: Keyboard) {

  }
  ionViewDidLoad() {
    this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
    this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
  }
}

credits to dPary

I really hope you all are doing proper device testing because all of these solutions that hide tabs cause the view to re-render on devices which will cause a very visible flicker and in some cases crashes. Anyways, all the best.

Yeah, I'm with @cozzbie all of this are just some hacks. We need a real official solution by the team @ionitron @manucorporat

+1 We need an official solution, none of these fixes are ideal for production use.

Current version of ionic does it on its own

21 Nis 2017 17:12 tarihinde "Ruben Callewaert" notifications@github.com
yazdı:

+1 We need an official solution, none of these fixes are ideal for
production use.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

Is this really taken care of. I still see the tab bar. Running latest version as on this writing ionic-angular 3.2.0.

İt was working very well with 2.x.x version but now i checked 3.x.x version
there is somethings wrong .it doesnt hide what you want on the screen until
typing on keyboard .Unfortunality we have fınd other solution ör downgraded
ur ionic version to any 2.x.x

12 May 2017 ÖÖ 3:32 tarihinde "vazad28" notifications@github.com yazdı:

Is this really taken care of. I still see the tab bar. Running latest
version as on this writing ionic-angular 3.2.0.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

Just a thought here. Hiding the tabs using any of the hacks above causes the view to refresh on devices, so how about we just drop the height of the tab zone to zero instead of hiding? Just a thought but I am too involved right now to try it out.

+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)

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

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

@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.

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.

@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.

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

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

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.

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

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

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

dasda

asd

not true answer

Is there any update on the official solution for this?

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..

````typescript
// 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);
}
````

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

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.

@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!

Works Perfect!
Thank you @codymbeardsley

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.