8

I'm building an app with Phonegap and I have a header which I have fixed to the top of viewport. 

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: red;
  z-index: 100;
}

This works as I want except when I tap a input field and the keyboard slides up. Then the positioning is totally discarded. The header is slided higher up outside the visable view. It returns to its place after closing the keyboard again.

I have read that some mobile browser don't care about positioned fixed and absolute to make sure that a possibly small screen don't get covered with a fixed element. Is this true?

Is there a way around this?

I have tried setting the header to absolute when a input is focused. I read about it here, http://dansajin.com/2012/12/07/fix-position-fixed/. However, it doesn't seem to be working for me.

Mel
  • 5,837
  • 10
  • 37
  • 42
Oscar
  • 383
  • 3
  • 13
  • Do you have the keyboard plugin added? There's a property you can add to the config.xml file: set `KeyboardShrinksView` to true. – Kerri Shotts May 23 '14 at 22:22
  • Hi @KerriShotts and thanks for your response. Yes I have the plugin added and the same with the KeyboardShrinkView property. It does not work for me. – Oscar May 26 '14 at 05:48
  • 6 and 7. Assuming 5 as well. @KerriShotts – Oscar May 30 '14 at 06:28
  • Ok -- so, I just ran into this. Try adding the keyboard plugin from several versions ago. It has its own issues, but the recent versions essentially do a no-op on iOS 7, which does us little-to-no good. Try: `cordova plugin add "https://github.com/apache/cordova-plugins#17bdd5fe62:keyboard"` (don't forget to remove the current keyboard plugin first.) – Kerri Shotts May 30 '14 at 22:44
  • Possible duplicate of several SO questions. See https://gist.github.com/avesus/957889b4941239490c6c441adbe32398#gistcomment-2193547 for details. – Brian Cannard Sep 04 '17 at 23:35

1 Answers1

4

PhoneGap’s implementation of fixed positioning for iOS is poor when it comes to the virtual keyboard. I’ve tried a number of proposed solutions, including the one you linked to, but none of them worked satisfactorily. Disabling KeyboardShrinksView can cause the input field to get hidden under the keyboard.

I ended up going with this workaround, which simply hides the fixed header when the keyboard slides into view and shows it again after the keyboard slides out of view. I await a more complete fix, but this solution has the benefit of being clean and reliable. The 10 ms delay on show() is enough to prevent the header from momentarily flashing in the wrong place while the keyboard is sliding back down. The 20 ms delay on hide() prevents the header from popping up in the wrong place if the user goes directly from one input field to the next.

$(document).on('focus','input, textarea, select',function() {
    setTimeout(function() {
        $('header').hide();
    },20);
});
$(document).on('blur','input, textarea, select',function() {
    setTimeout(function() {
        $('header').show();
    },10);
});
daxmacrog
  • 8,913
  • 1
  • 15
  • 16
  • 1
    Hi @daxmacrog and thanks for your reply. That is actually a pretty nice solution. The visual view port is smaller with the keyboard up, so it kind of makes sense to hide the header all together (which is quite large too). Thanks, probably gonna try this out today. :) – Oscar May 26 '14 at 05:57
  • 1
    Tried it out today and it works. While this is a good alternative solution I would still really want to have my header present and stuck to the top of the view port. I will try looking some more at some workaround to make this possible. Thanks! – Oscar May 26 '14 at 19:03
  • This would work for some situations, but if you have button in a navbar-fixed that you need to access (such as those that manipulate the form in question), then the user would have to tap outside of a form field to get those buttons back. It's a shame there's no obvious way to detect the keyboard itself, rather than focus on inputs. – Michael Oryl Nov 18 '14 at 14:45