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();
});
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.
Solution
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();
});
OTHER TIPS
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>