Overwrite tab-bar hidden for full keyboard control

Ionic Framework
1

Hi, I want full control over positioning of elements when the keyboard opens. Therefor I added the Keyboard: resize.None option to capacitor config. But, the tab bar gets the tab-bar-hidden class whenever the keyboard opens, which makes my sheet modal jump down.

I tried overwriting it in CSS by adding a more specific selector, but it doesn’t work. The shadow DOM doesn’t seem to take over my custom CSS:

ion-tabs ion-tab-bar:host(.tab-bar-hidden) {
    display: flex !important;
}

Does anyone know how to handle this gracefully?

My workaround now is adding a class to ion-tabs

ion-tabs.keyboard-is-open::after {
    content: "";
    height: 50px;
    padding-bottom: 34px;
    display: block;
}

when the Keyboard is open:

Keyboard.addListener('keyboardDidShow', info => {
    keyboardIsOpen.value = true;
});

Keyboard.addListener('keyboardWillHide', () => {
    keyboardIsOpen.value = false;
});

But the animation jitters sometimes. I rather just be able to remove or overwrite the tab-bar-hidden class.

2

I have the exact same problem. I looked into the Ionic source code and found that they are internally using stencil, which might be the reason why the :host selector isn’t working…

There really should be a property on ion-tab-bar to disable this behaviour. Maybe, I’ll find time and implement it…