Tabs Keyboard issue

1

Hi everybody,
i ve a minor problem with tab view. Everytime i focus an input field the keyboard pops up with the tabs on top

How can I solve this issue

Regards

2

Are this tabs in the footer?

3

I got curious about your css to make this round tabs…

4

Code is

<ion-tabs class="tabs-icon-top" ng-controller="ApplicationController" ng-init="init()">

<ion-tab class="first-tab" ... href="...">
    <ion-nav-view name="tab-a"></ion-nav-view>
</ion-tab>


<ion-tab class="second-tab" ... href="...">
    <ion-nav-view name="tab-b"></ion-nav-view>
</ion-tab>


<ion-tab class="third-tab"  badge="badge.number" >

   <ion-nav-view name="tab-c"></ion-nav-view>     
</ion-tab>   
</ion-tabs>
5

Will post the css tomorrow

6

Checkout the keyboard options and see if they help. Specifically hide-on-keyboard-open. I think you can use that to get rid of the tabs when the keyboard is open.

http://ionicframework.com/docs/api/page/keyboard/

7

I also have this problem.
Actually,in full screen it work fine,but if not full screen,when the keyboard open,the whole view of height is adjusted for (sceen’s height-keyboard’s height)…

8

Not sure how to use

hide-on-keyboard-open

On , because if i add the class to ion-tabs the whole app disappears

Changed to fullscreen --> works fine now
Regards

9

Because if you are debugging in the browser tool,you will see the element have class “tabs” includes the content.
So,don’t want to run full screen, add this css:

.keyboard-open .tabs{
display:none;
}
.keyboard-open .has-tabs{
bottom:0;
}
10

This method worked for me, however on Android sometimes the tabs bar dissapears completely (on a map page)