Hide tabs on keyboard open - ionic-framework

Question

I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.
I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.
Whats the best way to hide the tabs?
I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...
Nothing seems to work.
Any idea of how should I hide the tabs??
Thank you in advance!!

Answer 1

You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:
1) Install keyboard-plugin and node_modules as described in ionic2 docs:
ionic plugin add ionic-plugin-keyboard
npm install --save #ionic-native/keyboard
https://ionicframework.com/docs/native/keyboard/
2) Add the plugin to your app.modules.ts
3) Add the desired eventlister withiin the device-ready event in your app.component.ts:
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.keyboard.onKeyboardShow().subscribe(() => {
document.body.classList.add('keyboard-is-open');
});
this.keyboard.onKeyboardHide().subscribe(() => {
document.body.classList.remove('keyboard-is-open');
});
})
4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)
body.keyboard-is-open .hideElementOnKeyboardShown{
display: none;
}
5) Add the class to the desired element, eg an footer, div or sth else:
<ion-footer class="hideElementOnKeyboardShown">
<button round ion-button (click)="onLogin()" block>
<ion-icon name="logo-facebook" padding></ion-icon>
Login
</button>
</ion-footer>
6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.
have a nice day!

Answer 2

just add the following lines to your config.xml..
<platform name="android">
<preference name="android-
manifest/application/activity/#android:windowSoftInputMode"
value="adjustPan" />
....
</platform>
What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behaviour for your app.

Answer 3

You can achieve that by writing a directive that subscribes to the Keyboard events and then adds(hide)/removes(show) a css property/class (display: none) to the tabs element once the keyboard is shown/hidden.
#Directive({
selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
private static CSS_CLASS_NAME = 'hide-tab-bar';
private show: Subscription;
private hide: Subscription;
constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {
platform.ready().then(() => {
this.show = keyboard.onKeyboardShow().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
);
this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
);
});
}
ngOnDestroy(): void {
if (this.hide !== undefined) {
this.hide.unsubscribe();
}
if (this.show !== undefined) {
this.show.unsubscribe();
}
}
}
add css class in app.scss (for example):
.hide-tabs {
display: none;
}
on your tabs element <ion-tabs hideTabs> </ion-tabs>
**code added for proof of concept