Problem displaying all navbar links when viewed on phone

[webbyhall]

I have a navbar with 8 links. I've noticed that when I activate the navbar on a phone and view it in landscape, it doesn't scroll all the way down to display the last link.

A live example of this can be shown on the 'Jumbotron' example template. When I drop down the menu I can't view the whole login form.

[cvrebert]

What device and web browser are you using?

[webbyhall]

I'm using Firefox on HTC V phone.

[cvrebert]

What version of Firefox? What version of Android?

[webbyhall]

Sorry, I'm running FF 23.0 and Android 4.0.3.

[cvrebert]

How far can you scroll? Could you post a screenshot?

[webbyhall]

I can get half way down the second input field.

[mdo]

Can you scroll to view it?

[ipatovanton]

same problem on blackberry 9900

[cvrebert]

@ipatovanton Disclaimer: we don't officially support that platform.

[webbyhall]

That's as far as I can scroll so I can't access the submit button when viewed in landscape.

[designbydarren]

This is also evident on an iPhone 4 using Google Chrome 29.0.1547.11 and Safari (on iOS 6.1.3)

[imawuman]

in version 3.0.0-rc2, there was a class named "navbar-collapse-scrollable" or "nav-collapse-scrollable" that allowed you to make the collapsed navbar scrollable. I believe this commit #9403 removed that class and documentation

[sergeyd108]

Have the same problem on android 4.0.4 default browser.

[mdo]

This should be better now, but not fully fixed. I switched to using overflow-y: auto and tested on my Android running 4.x in the stock browser. Also tested in iOS 7, Chrome, and IE8—all looks good. Scrollbar only appears when the max-height is passed.

For those running into problems with the horizontal mode, the only way to really fix this is to change the max-height on the .navbar-collapse from the current 340px to something like 270px (for one of the most common resolutions). Given that the Android market is saturated with inconsistent sizes, there's no way via CSS to solve this.

Perhaps @fat can revisit the JS in 3.0.2 to detect viewport dimensions and size accordingly, but that sounds bad as well.

[cvrebert]

If only the Android Browser supported the vh unit...

[damphat]

Using "overflow-y: auto" make another bug on my Laptop with Google Chrome 30.0

Bug reproduction:

• Create simple navbar which contain a dropdown menu
• Shrink browser to make navbar collapsed
• Open menu (and do not close it, just do the next step)
• Maximize browser
• Click dropdown menu
  => the dropdown-menu will not be shown

I have not a phone now for testing but I think this code may fix the problem for both phone and desktop browsers:

//
// navbar.less
//

&.in {
    overflow-y: scroll;
}

@media (min-width: @grid-float-breakpoint) {
    &.in {
        overflow-y: visible;
    }
}

Anybody help me test this?

[mdo]

Closing this out since I don't see any additional fix for this in the near future. Anything we do will likely have to come with v4 when we can break backward compatibility.