Bootstrap: Can't scroll to last collapsed navbar item on mobile when there are many items

[XhmikosR]

[Original title: Expanded navbar on mobile (landscape) is cut off]
/CC @mdo

[cvrebert]

Which platforms+versions?

[cvrebert]

Also, I presume you're referring to fixed top navbars?

[XhmikosR]

Yeah, sorry forgot to mention the details since I was discussing this with mdo.

Happens with Samsung S4 Android 4.3 FF/built in browser but mdo tried with iphone and he could reproduce. I don't have a jsbin example but you can check http://mpc-hc.org/; the last navbar link, the Donate one doesn't show in landscape mode.

I can also reproduce the issue in Google chrome tools when I emulate Samsung S4 in landscape mode.

I opened the issue as a reminder for mdo, but I'm not sure he'd like to address this upstream. I mean the docs state that one has to either reduce the number of links or use the responsive utilities for this use case.

[cvrebert]

Actually, that docs note is about the non-mobile fully-horizontal navbar.
Responsive utilities deal with viewport widths, not viewport heights, so they can't help in this case.

[cvrebert]

Confirmed on iOS 7. Testcase: http://jsbin.com/dovil/1

[s4jum4]

I have an issues with portrait and landscape (Android 2.2.1 - screen 320x480 pixels) doesn't work the scroll in the menu, and also in (Android 4.2.2 - screen 480x854 pixels) landscape, I have the same problem, I can't do the scroll, maybe the problem is this one:

.navbar-collapse {
max-height: 340px;

[cvrebert]

Regression of #10601.

[DavidVII]

Any ideas on how to fix this? I've removed the max-height, but it still happens. It seems this has to do with the .navbar-collapse being absolutely positioned.

[JamieLaing]

Here is a JQuery fix...
$(".navbar-collapse").css({ maxHeight: $(window).height() - $(".navbar-header").height() + "px" });

[mdo]

I think the only sensible implementation is one that's on top of the core, not in it. We could add a vertical media query based on viewport height, but that's not always going to apply. For example, only fixed headers exhibit this problem, not static ones.

We could unfix the fixed navbars to address this, but that sounds lame at this point. I think our best bet is to punt on this until v4 when we can simplify and improve a bit easier.

Thoughts?

[JamieLaing]

I'm not sure who you're requesting thoughts from, but I definitely agree on punting to v4. This is a fixed header only problem, and flipping this over to a Jquery fix is really easy.

[XhmikosR]

Thanks @mdo! I tested this locally and seems to work as expected :)

[alfredyeap]

Do anyone has the same problem that the Menu item cant be scrolled in
Android 2.3.6 Gingerbread version... (Mobile View)

The listing in the menu exceed the max-height but scroll not coming out/ unable to scroll in the menu.

[alfredyeap]

@s4jum4 how was your menu? Do you find any solution to the scrolling problem in your Android 2.2.1??

[s4jum4]

Hi @alfredyeap, currently I have the same issue, apparently this issue appear when we are using the menu with fixed option.

Thanks @JamieLaing, your code is working better for Android 4+

[XhmikosR]

@mdo: I went ahead and tried the latest HEAD on a live site (http://mpc-hc.org/). While on desktop everything works fine in landscape view, on mobile the last navbar item is still hidden. :/

[XhmikosR]

I'm gonna reopen this @mdo since the issue is present, unfortunately.

[XhmikosR]

This still doesn't seem fixed.

[mdo]

@XhmikosR You were also missing some CSS in that site I think. I checked the fixed top navbar example on the emulator and it behaved properly.

[XhmikosR]

@mdo: yeah, thanks for that, I added it back, but still the same issue so far.

[mdo]

Turns out it's an iPhone vs Android problem. Need to revisit the width I'm using or try some density stuff.

[mdo]

Without coming up with something arbitrary, I'm fine punting on this for v3.x given our current breakpoints. I'll revisit the values and tiers in v4 and maybe that'll address this. Until then, @XhmikosR, just override the media query as you need. Not the best, but neither is the solution.

[gabrielescodino]

This might help:
http://stackoverflow.com/questions/19227496/scrollable-menu-with-bootstrap-3-menu-expanding-its-container-when-it-should-n

[maniqui]

Can confirm this affects browsing on Android 2.3.6.

A possible fix taken from this SO answer:
http://stackoverflow.com/a/25060926/2461947

 .navbar-collapse::-webkit-scrollbar {
    width: 20px;
}
.navbar-collapse::-webkit-scrollbar-track {
    background-color: lightgray;
}
.navbar-collapse::-webkit-scrollbar-thumb {
    background-color: lightblue;
}

You can test it here:
http://jsbin.com/badoxekedi

Pros:

• now you can scroll an overflowed .navbar-collapse

Cons:

• styles will probably apply to every Webkit-based browsers, not only those old versions (ie. browser on Android 2.3.6) that don't work properly. Not sure if there is a way to scope the fix to old browsers.
• for the scroll to work, you have to tap on the "scrollbar-track". The "scrollbar-thumb" won't work (ie. you can't drag it as you would expect).

[twbs-lmvtfy]

Hi @maniqui!

You appear to have posted a live example (http://jsbin.com/gibufafico/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 11, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.2 ; saw what appears to be usage of Bootstrap 3.1.1
• line 84, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.2 ; saw what appears to be usage of Bootstrap 3.1.1

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[maniqui]

@twbs-lmvtfy: fixed.

[XhmikosR]

I really need to test this...
On Feb 20, 2015 1:55 AM, "Julián Landerreche" [email protected]
wrote:

@twbs-lmvtfy https://github.com/twbs-lmvtfy: fixed.

—
Reply to this email directly or view it on GitHub
https://github.com/twbs/bootstrap/issues/12738#issuecomment-75164357.

[carasmo]

https://output.jsbin.com/lufuxo == navbar-fixed-top can't get to menu items when the viewport is shorter than the height of the menu on small viewport widths.

[twbs-lmvtfy]

Hi @carasmo!

You appear to have posted a live example (https://jsbin.com/lufuxo/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
• W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[XhmikosR]

This is still valid.

I managed to pinpoint the version where this started to break. 3.1.1 works fine, 3.2.0 and on has the problem.

We really need to find a solution for this.

[XhmikosR]

Actually, scratch that. The issue I see is different than this.

Something changed with the navbar's height.

[xxxzeus]

Adding height and overflow styling with important tag after boostrap css has been included seems to fix problem for me. Here's how :
<style> .navbar .navbar-collapse.in { max-height:300px!important; overflow-y:scroll!important; overflow-x:hidden!important; } </style>

[Narimanr]

I can confirm @BroZeus solution works.

[the94air]

yaaa @BroZeus that way works very fine

[betterm]

@BroZeus solution works

[DaniSpringer]

@BroZeus still works. Personally had to change max-height to 340px to avoid jump to height of 300px.

[mikedoubintchik]

Instead of setting a max-height that may be less than optimal you could go with:

.navbar .navbar-collapse.in { max-height: 80vh !important; overflow-y: scroll !important; overflow-x: hidden !important; }

[niftylettuce]

thanks @allurewebsolutions, including this by default with https://crocodilejs.com

[troytempleman]

This might be even better, so that your nav can go to the bottom if necessary:

.navbar .navbar-collapse.in { max-height: 100vh !important; overflow-y: scroll !important; overflow-x: hidden !important; }