[v4-beta 3] Navbar fixed-top problem and non scrollable or visible drowpdown menu links > bug ?

[poilozorey]

Hello
There is a problem with the menu "dropdown" in navbar "fixed-top" and the small resolutions (cell phone or smartphone).

When the dropdown menu contains, for example, more than 10 links (categories or other ...), on small resolutions (less than 768px in height) the menu comes out of the visible area of the screen.
The navigation bar is "fixed" and does not move, there is no scroll to get the links of the drop-down menu (drowpdown) that are outside the visible area and these links are invisible or not scrollable.

Is there a way to make menu links visible or scrollable?

Look at the examples below
On desktop screen we can see the 10 links of the dropdown menu
But on cell phone (less than 768px in height) the links are inaccessible and invisible (no scrolls possible).

Firefox (same think on Chrome) desktop large screen :

Smart phone resolution (less than 768px) height :

Smart phone resolution (less than 768px) width :

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[poilozorey]

Here the code with a "default navbar" and "drop-down menu links" visible and scrollable.
https://codepen.io/poilozorey/pen/baoJvE
Here the code with a "fixed-top navbar" and "drop-down menu links" not visible or not scrollable
https://codepen.io/poilozorey/pen/goGyRN

On desktop screen when the page height allows it with "default navbar" the "dropdown links" are visible and accessible.
But when one tries with a "fixed-top navbar", the "dropdown links" are not accessible, not visible and not scrollable.

[Johann-S]

Not sure if it's a CSS or JS issue here 🤔

[poilozorey]

I do not know if the problem is .CSS or .JS, but the problem is there.
Unfortunately this makes the "navbar fixed-top" unusable for sites that have a lot of dropdown links !

You might consider giving a property when a "dropdown show" comes out of the screen, like for a "default navbar", make sure that if the dropdown links come out of the screen the dropdown menu goes into visible ...

Or, although this solution is less convenient for cell phones, to ensure that the links are scrollable inside the menu ???

it would be necessary to understand what makes the scrollable elevator appear in a "navbar default" and add that to "navbar fixed"

[719media]

it seems css to me. simplified version with no js:

https://codepen.io/anon/pen/PEOqGz

if you're willing to sacrifice some ie/edge users, you can always use position: sticky instead of position: fixed...

https://caniuse.com/#feat=css-sticky

alternatively, you could just add something like max-height:300px;overflow:auto; to the dropdown-menu... I always figured bootstrap would have some sort of sane default for dropdown-menu, but I suppose the ideal dropdown height could drastically differ if you are developing a desktop-only admin application vs universal responsive site. Perhaps a variable in _variables.scss could be created for this purpose?

[poilozorey]

Still today with bootstrap v4.0.0-beta.3 in small resolutions (cell phones less than 768px in height) the "dropdown menu" (in a navbar fixed-top) when it contains too many links comes out of the visible area of ​​the screen and makes the links unreachable and invisible .

So currently we can not use Bootsrap v4.0.0-beta-3 for these reasons:
-> navbar fixed-top.
-> full of links in dropdown menu.
-> small resolutions of cell phones.
In these conditions, it forces us to use "only" the "navbar default".

719media
I tested added "overflow: auto; max-height: 300px;" to the "dropdown menu" but it does not work.
it blocks a function and the dropdown menu remains open 'show) it is impossible then to fold it.
When to remove the .JS, it is not possible, especially when it comes to dress a theme for wordpress, joomla or dotclear.

[mukhammad-akilov]

Possible solution of the problem:

https://codepen.io/anon/pen/vpWZap

It would be nice if there was a block .navbar-header that wraps around here .navbar-brand and .navbar-toggle so as not to calculate which length is higher. In this example navbar is expanded before xl screen so it would be nice if we could detect current breakpoint with js to add max-heigh: calc(100vh - %px) and overflow-y: auto to .navbar-collapse in all screen except xl screen.

[719media]

@poilozorey the intent behind the no JS example was just isolating the cause, not suggesting it would work for your use case. The underlying issue is that if you have a position fixed container that contains a position absolute container (your dropdown), which means the dropdown is not affecting DOM layout. So you need to set a height on the dropdown to get scroll. Using your example, like so:

https://codepen.io/anon/pen/eyeezw

This is true whether or not you are using popper or not. Coincidentally, you are actually not using popper, as bootstrap docs state Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required. I'm not exactly sure why popper isn't used for navbars, but regardless, it should not really matter to your example. Just set an overflow. In my opinion, this is good interface design even if you aren't using fixed navbar.

[poilozorey]

Ghost180195
your example does not seem to guarantee a solution, especially with regard to the dropdown.

I tried to include in your solution a dropdown menu that contains 10 links but it did not work.
Unless I did it right ...

Would you submit another example with 15 links or more in a dropdown menu in a "navbar fixed-top" to see if the links are visible and accessible on small resolutions (cell phones less 768px in height) ???

719media
I just tested your example. The problem with your solution is that depending on the resolution, the dropdown menu comes out of the screen and therefore, even if it is "scrollable" it is no longer in the visible area of ​​the screen.

For example, try in ...
-> 736x414 (iPhone 6 Plus in horistontal position).
-> 533x320 (Nokia Lumia 520 in horisontal position)
You see the "dropdonw menu" is no longer visible because it comes out of the screen.

[mukhammad-akilov]

Works fine in all screens except xl screen:

https://codepen.io/anon/pen/vpWZap

In xl screen we should not add max-heigh: calc(100vh - %px) and overflow-y: auto to .navbar-collapse and for this we must detect current breakpoint with js.

Read here about my feature request:
#25124

[mukhammad-akilov]

Final version:

https://codepen.io/anon/pen/xpPpqP

[719media]

@poilozorey yes, at some point you have to actually do a little code yourself.

you have many options:

1. utilize @Ghost180195 examples on how to calculate remaining height for the viewport.
2. or create your own media queries
3. or dynamically adjust using vh units like:

https://codepen.io/anon/pen/baYaoG

4. use position: sticky at the expense of some older browser users. The site would still be useable for them, they just would get a navbar that wouldn't stick on scroll. And no additional JS required for solution which is nice.

[mukhammad-akilov]

my examples are for .navbar-collapse.
For .nav-item dropdown you can use @719media method.

[mdo]

Is this related to #24920 at all?

[719media]

Not really. This issue does not use popper. It is in the nav, which avoids popper here (https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js#L150).

#24920 is an issue dealing with how popper is calculating the placement of the dropdown

[poilozorey]

719media
According to your example :
https://codepen.io/anon/pen/baYaoG
would it be possible to see a solution like this (like your example) add in native to bootstrap 4?

[poilozorey]

I see another problem with "navbar fixed-top".
When the navbar contains too many links, in small resolution (cell phones less than 768px in height) the links are no longer visible because they come out of the frame of the screen, in this example, ditto for the search field.

So finally, I do not think that only the "dropdown menu" which contains a lot of links and that it is used with "navbar fixed-top" in small resolution (cell phones less than 768px in height) ...
I think it's "navbar fixed-top" that lacks a "patch".
(a bit like the one you submitted for the "dropdown" with overflow: auto and addition .JS that should be adapted to the function "navbar fixed-top")

If you adjust the size of the window, you will see the bug of "navbar fixed-top" links coming out of the visible area of ​​the screen.
https://codepen.io/anon/pen/baYZrj

look here
When the "navbar" is "default" (not fixed-top) the scroll becomes automatic and allows to see all the contents of the navbar (links, menu dropdown search form etc ...)
https://codepen.io/anon/pen/GyOeyy
Why this function is not applied to "navbar fixed-top"?

Here are also in picture ...
Nokia Lumia 520 (320x533) in height :

Nokia Lumia 520 (533x320) in width :

We see that the links of the "navbar fixed-top" come out of the visible area of ​​the screen and become invisible and unaccessible.

[719media]

@poilozorey I don't think the solution I provided should be applied to bootstrap native.

The issue with the link scroll collapse could be fixed by applying max-height: 100% and overflow: auto; to .fixed-top, but then that breaks the dropdown because it gets caught inside the max-height of the .fixed-top navbar . Now, the dropdown breakage could be avoided if the navbar used popper for dropdowns, which it doesn't for some reason. I'm not sure why, you'd have to ask @Johann-S or @mdo about the dropdown.js navbar exception (they seem the most familiar with this code):

af93db2#diff-bfe9dc603f82b0c51ba7430c1fe4c558

which has since survived a few rewrites and currently exists as just a "don't use popper in navbar" form.

Perhaps it may be unnecessary now, it looks like it may have been applied back before bootstrap was using display: flex everywhere? I bet it could be removed and whatever exception it was trying to avoid, if it still exists, could just be handled inside of popper. Either way, I'm not sure of the reason for lack of popper in navbar.

In my opinion, having some dropdowns use popper, and others not, is worse than just having everything use popper just for maintainability reasons, let alone the advantages that popper generally brings (like it would to your use case).

So, in summary, I would propose that:

1. CSS max-height: 100%; and overflow: auto; (or overflow-y: auto;) be applied to .fixed-top to fix the collapse in bootstrap core.
2. After applying the above, your dropdown is now totally broke. It's stuck inside the max-height of the .fixed-top. So you want to use popper. The exception for navbar popper avoidance can be removed for reasons stated above in bootstrap core.
3. After applying the above, your dropdown is now appearing again, but the scroll is still stuck within the position fixed. The scroll can be fixed on your own by applying the vh calculation earlier in this thread (or applying your own @media queried heights), and overflow. I think this part is hard to apply universally, so for now I would say it would not be part of bootstrap core.

For now, I really recommend you just use sticky-top instead of fixed-top which would fix all of your problems unless there is good reason to support legacy browsers. That will fix all of your issues for now. sticky-top is good because legacy browser users will still get the navbar at the top of the page, it just won't scroll. Personally, I think fixed-top should just die, and we wouldn't have to worry about any of this :) if only ie/edge would have implemented it sooner... and bootstrap supports IE 10+ so it must stay... right? :)

[poilozorey]

719media
Regarding your proposal, i did:
1 - adding the class ".dropwdown-menu-scroll" to ".drowpdown-menu"
2 - rule added "overflow-x: auto;".
3 - added your piece of .JS
It works!

So ...

4 - added to the class ".fixed-top" the rules "max-height: 100%;" and "overflow: auto" (or "overflow-y: auto;").

Indeed, the navigation bar is broken.
But I can not understand the next step or you seem to say that we have to disable the functions of "Popper", how should I do that?

Do you have the kindness to show me an example on CodePen for example?

[mdo]

Closing this as a stale issue that's also not a bug. Adding some navbar overflow scrolling is being tracked in another issue at #24796.

[rodryLeon]

i fixed it with overflow:hidden in the content block
{
overflow:hidden
}