Use css to display Dropdown in Navbar

[Johann-S]

In this PR, we remove CSS aplied by Popper.js (only for Dropdown in navbar) to let our CSS do the job.

We detect a weird behavior, If we have a navbar in 100% width container an horizontal scroll appear.
See this CodePen : https://codepen.io/zalog/pen/Rgrbod (first Navbar)

I'm not sure if it's really a bad behavior, maybe @mdo can help us in this use case ?

Thank you to @zalog to review/improve my first commit 👍

Close : #22699

[mdo]

What if we scoped this to a max-width media query instead? Would that mean we don't need to reset the styles later for .dropdown-menu and .dropdown-menu-right?

[Johann-S]

.dropdown-menu-right only exist here, because we handle that on our JS for the other Dropdown which aren't in a navbar.
But yes I think it's possible to add a media query just for the Dropdown position

[zalog]

I'm on branch .v4-dropdown-navbar and made two pens:

• one with the last commit: e836f5
• the other with one commit before the last commit: 7d3368

The problem is that with our last commit:

.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        .dropdown-menu {
          position: static;
          float: none;
        }
...

the rules position: static; float: none; won't apply in case of:

• navbars that always collapse .navbar
• navbars that never collapse, .navbar-expand

This two use cases (navbar that always/never collapse) are already documented here.

I mentioned this, first time, here. I hope now It's much more clear :)

[Johann-S]

Currently we have an issue on navbar (#22831) to fix before the merge of this PR
I misunderstood something but now it's clear sorry 😟

[FezVrasta]

Any reason to make Popper apply styles and then remove them?

You could set the enabled property of the applyStyle modifier to !this._inNavbar

[Johann-S]

Oh thank you @FezVrasta ! Nice review !

Edit :
Finally I tried what you suggested but it add inline style see floating-ui/floating-ui#309

[FezVrasta]

Gonna fix this tomorrow morning!