Bootstrap: Dropdown menus in page appear underneath fixed top navbar

[ccartee]

• navbar with fixed top
• button with dropdown action menu
• not enough room below to display the menu

reproducing isn't hard if you shrink the window sufficiently
https://getbootstrap.com/docs/4.0/components/dropdowns/

Can occur naturally if a button is near the top of the page and the drop down menu is long enough

zindex of fixed-top = 1030
zindex of dropdown-menu = 1000

Expected, either

1. the drop down should be bumped down to below the fixed nav bar (it should be aware of the container's margin/padding and respect it)
2. the drop down menu should be shown on top of the fixed nav bar (ie, dropdown menu zindex should be higher than fixed-top)

[ccartee]

https://jsfiddle.net/charleycartee/jdz3k57z/4/show/

Invoices action button, occurs with screen size/fiddle wrapper is 575px high

[ccartee]

https://jsfiddle.net/charleycartee/jdz3k57z/8/show/
this fiddle, same issue, slightly larger screen; 2nd row invoice button puts the drop down header under the nav bar

[mdo]

As far as the docs are concerned, this is desired behavior to me. Likely the same I believe for the rest of the core project. Unless a dropdown is in the navbar, it should roll under a fixed navbar.

[ccartee]

That doesn't make any sense. The top items in the dropdown are _literally_ unreachable on my laptop monitor.

Either the drop down should be aware of it's container's margins (which would bump it below the navbar when at the top of the page) or it should show up over it. Your comment rules out the latter but doesn't explain why it's ignoring the container's margins.

[mdo]

There's no container margin's for it to ignore—the dropdown is positioned over the document. It has no idea the navbar exists in any sense, above or below or next to it.

[ccartee]

re: There's no container margin's for it to ignore

That's not true; it's ignoring both the margins and padding of it's containing div (it has padding in the fiddle I posted, margins in one of the use cases that I actaully ran into it with, edit: previous fiddle padding switched to margins: https://jsfiddle.net/charleycartee/jdz3k57z/10/show/)

[patrickhlauke]

the issue, at its core, is that fixed top navbar and long auto-positioning dropdowns can lead to borked end results. what i would suggest, though, is to disable popper's "flip" behavior (e.g. adding data-flip="false" to the buttons) so that the dropdowns don't try to auto-position themselves (by orienting themselves on the viewport, and therefore falling underneath the fixed top bar) but always open downwards. see http://getbootstrap.com/docs/4.0/components/dropdowns/#options

[ccartee]

@patrickhlauke that's a much better suggestion than just saying that it's working as intended... but even with data-flip=false you'd wind up with the same sort of issue if you have a fixed footer (ie, it ignores the bottom margin.

https://jsfiddle.net/charleycartee/jdz3k57z/24/show/

that could actually happen with a fairly short drop down (the bottom ones in that example are shorter than the ones up top)

It really seems like there should be a way to make the dropdowns respect the padding/margins of the div that the buttons are in.

[lastobelus]

@mdo you are in essence saying that page dropdowns are simply unuseable with fixed navbars, and offering no workaround.

It's not that it scrolls under the fixed navbar, it opens under the fixed navbar, meaning the user will _never be able to access_ the top two elements no matter what they do.

[lastobelus]

I did find a simple workaround: apply margin-top: to the .dropdown-menu