fix(css): force .navbar .dropdown-menu positioning

[zalog]

Demo

• Before: http://codepen.io/zalog/pen/eWLvRP
• After: http://codepen.io/zalog/pen/WjgGzM

Problems:
Please follow my example in before, the problems are in the same order.

• for navbars that never collapse .navbar.navbar-expand, .dropdown-menu has position: static and push parent .navbar container down
• if .dropdown-menu it's on the edge of browser, popper will move it and seems unnatural for .navbar
• if we use only .navbar (for navbar that always collapse), .dropdown-menu act in popper style

--

I tried to solve that by forcing .dropdown-menu to act like before popper, and in a mobile first abordation.

cc @Johann-S, #22628, #22630

[Johann-S]

Not sure about that because Popper always use absolute position

[zalog]

Yep, I know.
But now, because of mobile first abordation, we need to overwrite L80.

Why mobile first abordation:

• for navbars that never collapse, .navbar.navbar-expand. My first navbar in the before example
• for navbars that always collapse, just .navbar class. My third navbar example in that before pen

[Johann-S]

About that :

if .dropdown-menu it's on the edge of browser, popper will move it and seems unnatural for .navbar

If you user wants to disable that feature they can add data-flip="false" to disable that behavior

Sorry but I'm not sure about what you are trying to fix here

[zalog]

We can use data-flip but not for .navbar, I think. Here, .dropdown-menu must stay in place by default.
What do you think?

Preview:

--

This fix is for navbars that never collapse .navbar.navbar-expand and navbars that always collapse, just .navbar.

[FezVrasta]

I'm not sure what are you trying to fix, the first codepen looks better than the second one...?

[zalog]

Before: http://codepen.io/zalog/pen/eWLvRP

• first navbar example is for .navbar.navbar-expand, just click ok "Dropdown link" button please. It will push the .navbar down.
• second example, just click on "Dropdown link". It will open like in my previous screenshot.
• third navbar example is for .navbar without any complementar .navbar-expand or .navbar-expand-* classes. Click on the sandwitch button to collapse menu, and after that, click on the "Dropdown link"

[FezVrasta]

I see the dropdowns broken only in the version when you add static !important and unset !important 😢

[zalog]

Yes, it's because of this commit.
The before example is with the current v4-dev branch.

[Johann-S]

With your PR this issue will stay fixed : #22628 ?
And can you update your branch please

[zalog]

Yep, #22628 stays fixed.
Yes, I just rebased the branch.
Did you guys saw this bugs?

[Johann-S]

I approve but it's a real problem to override Popper.js css with !important

[zalog]

Yep I know... But this is the only way to override Popper.js and have .dropdown-menu controlled in the .navbar way.