Keyboard pushing up tab bar and height=device-height



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 ( and another threads in this forum. Has anyone solved this problem?

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


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">


@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 ( Then, i just added one input in a tab and i have this:

without keyboard:

with keyboard:

Missing forum's images in posts

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?


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"));


            if (obj){
            if (obj){




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


I know the devs are working on this:



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?