search

istvan-ujjmeszaros / bootstrap-autohidingnavbar

An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way.
Other
321 stars 106 forks source link

input fields on ios causing the navbar to hide #31

Open morrow95 opened 8 years ago

morrow95 commented 8 years ago

Not sure if this has been going on for awhile now and I never noticed it or this is due to a newer version of this script.

I have a user login dropdown in my nav with two input fields. When the menu is collapsed (iPhone on ios) the menu works fine, BUT as soon as I tap any of the input fields the menu hides. I believe this is due to ios slightly zooming in the screen so the script thinks it scrolled and hides it.

I honestly don't remember this ever happening before as I would think I would have noticed it... plus I usually test things out pretty thoroughly. The only things that have changed recently are :

I 'think' I previously had 1.0.2 or 1.0.3 installed - I know it didn't have the navbarOffset option. Is there anything in the code since those that would cause this? Possibly the new bootstrap or jquery?

morrow95 commented 8 years ago

Thinking about this some more just now. Assuming the issue is what I think... the zooming of the screen makes the plugin think the page scrolled and closes the nav... what about 'disabling' navbar hiding if class="navbar-collapse collapse in" is present? The 'in' class just means the navbar is in a collapsed state and open or in other words you are in mobile view with the navbar open.

If that sounds reasonable it might be worthwhile to add a don't hide on mobile view option as well.

morrow95 commented 8 years ago

Kind of a hack, but I was able to make my solution work and prevent the navbar from disappearing when ios zooms in on the screen after touching an input field (in my case the username/password fields).

Added a condition in the script, but this requires you have an id 'navbar' set on your actual menu contents : 

  function hide(autoHidingNavbar) {
    if (!_visible || $('#navbar').hasClass( 'in' )) {
      return;
    }

the html I use for my menu contents : 

<nav id="navbar" class="navbar-collapse collapse">

which will have a class of 'in' added when in mobile/collapsed view and it is open.