Keyboard pushing up tab bar and height=device-height


#1

Hi,

I’m trying to keep the tab bar at the bottom. I’ve had luck using the meta tag height=device-height, but this solution is breaking the viewport on iOS 7. There is an open issue at github (https://github.com/driftyco/ionic/issues/585) and another threads in this forum. Has anyone solved this problem?

Continuing the discussion from iOS 7 keyboard pushing up tab bar:


#2

For any app I’ve done I’ve just included this meta tag and everything seems to work without any issues

<meta name="viewport" content="initial-scale=1, user-scalable=no">

#3

@mhartington I’ve already tried with this config. To test i’ve created another app, using cordova 3.3 and pasted the demo provided by @adam (http://codepen.io/ionic/pen/kcjLb85). Then, i just added one input in a tab and i have this:

without keyboard:

with keyboard:


Missing forum's images in posts
#4

I have exactly the same problem, and the solution gave by mhartington doesn’t work for me.
@felipecm Do you have any update about that?


#5

Hi @nicolasca, I’ve tried an ugly solution. I have a directive for my inputs, that hide the tabbar when an input receive focus. A better way is extend the input tag…

directives.directive('myDirective', function () {
// Linker function
return {
    restrict: 'AC',
    link: function (scope, element, attrs) {

        var obj = angular.element(document.querySelector(".tabs"));

        element.bind('focus',function(){

            if (obj){
                obj.css("z-index","-1");
            }
        });
        element.bind('blur',function(){
            if (obj){
                obj.css("z-index","5");
            }
        });


}
}

});


#6

you are luckier than me. My keyboard blocks my input box and i can’t input anything!!!


#7

I know the devs are working on this:


#8

Hello!

I’m running v.1.0.0-beta.3 and I am testing on 2 devices:

  1. iPhone 5 with iOS 7
  2. Nexus 5 with Android 4.4.2 Kitkat

I have a long list of chat messages and at the end is an input box with a send button. When I focus on the input box, here is what happens in both the phones.

On the iPhone, it works perfectly fine.

On the Nexus 5, I get the Blue arrow that you get when you start selecting text on Android and the screen is white. BUT, when I scroll just a little bit it works perfectly fine and everything re-appears. When I hide the keyboard, I see that the top nav-bar has been pushed half-way to the page.

Any ideas on how this can be fixed?