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)