I want to hide the tabs when keyboard is shown. But could not find any working solutions. I have tried with the native keyboard api to show and hide tabs
export class TabsPage {
homePage = HomePage;
explorePage = ExplorePage;
cartPage = CartPage;
feedPage = FeedPage;
valueforngif = true;
constructor(platform: Platform, public navCtrl: NavController, public navParams: NavParams, public keyboard:Keyboard) {
platform.ready().then(()=>{
this.keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false;});
this.keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true});
})
}
ionViewDidLoad() {
}
tabchange($event){
console.log('tab changing');
}
}
and tabs.html looks like this
<ion tabs *ngIf="valueforngif"> <ion-tab>....</ion-tab> </ion-tabs>
but when keyboard opens, the whole app stops working and i think that’s because the root is gone when i set false to the ion-tabs. Can you help me to solve this ?
cherry
March 11, 2018, 1:12pm
#2
Forget the *ngIf !
What you can do is this:
If the keyboard shows use this code to hide it.
Just as an example:
keyboardCheck() {
if(this.keyboard.isOpen()){
let tabs = document.querySelectorAll('.show-tabbar');
if (tabs !== null) {
Object.keys(tabs).map((key) => {
tabs[key].style.display = 'none';
});
}
}else if(this.keyboard.isClosed()){
let tabs = document.querySelectorAll('.show-tabbar');
if (tabs !== null) {
Object.keys(tabs).map((key) => {
tabs[key].style.display = 'flex';
});
}
}
Note: You can also just use else instead of else if !
If you wanna know more about the open/closed keyboard command I suggest you read this doc:
2 Likes
I managed to get 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;
}
}
3 Likes