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.
La 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();
});
Autres conseils
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>