Bootstrap navbar-bottom-fixed moving with on screen keyboard on Tablet

Question

I am using a bootstrap navbar-bottom-fixed for a bottom navigation bar. Whenever I need to input some stuff, the onscreen keyboard is shown and the navbar "floats" toghter with it (is displayed above the keyboard).

Any ideea how I could overcome this? If I could just listen to the keyboard show event I could simply change the css postion attribute and I think It will work.

Thanks for the help.

Answer 1

You could check if and input is focused with Jquery and then hide the bottom bar if it is.

Like this:

$('input').focus( function() {
    $('.navbar-bottom-fixed').hide();
});

$('input').blur( function() {
    $('.navbar-bottom-fixed').show();
});

Answer 2

I solve it this way:

<script type="text/javascript">
    $('head').append('<style>.navbar-fixed-bottom{visibility:hidden}@media (orientation:portrait) and (height:' + $(window).height() + 'px){.navbar-fixed-bottom{visibility:visible}}@media (orientation:portrait) and (height:' + $(window).width() + 'px){.navbar-fixed-bottom{visibility:visible}}@media (orientation:landscape) and (height:' + $(window).width() + 'px){.navbar-fixed-bottom{visibility:visible}}@media (orientation:landscape) and (height:' + $(window).height() + 'px){.navbar-fixed-bottom{visibility:visible}}</style>')
</script>