Dropdown — Apply positioning only when Popper is not used

[rohit2sharma95]

Apply positioning styles on the dropdown menus only when they are not using Popper. Since initial positioning styles may interfere with Popper (Previously these styles caused issues).

Ref:

• Remove the default positioning from .dropup #33120
• https://popper.js.org/docs/v2/faq/#why-is-my-popper-in-the-wrong-location-or-not-visible-at-all

Preview:- https://deploy-preview-33482--twbs-bootstrap.netlify.app/docs/5.0/components/dropdowns/

[mdo]

If I’m reading this right, this will now also require the correct data attribute for any placement, yes? We’ll want to document that in our Migration guide I think.

[thednp]

You guys intend to keep the CSS for position variations of .dropdown-menu-end, .dropend, .dropup, .dropstart?

In the latest BETA3, the .dropup menu won't show above the target without Popper.js and the style for .dropdown-menu-end (mainly right:0; left: auto) is missing.

Or you intend to give Popper.js full power over the dropdown position and lock this plugin in this dependency?

[thednp]

I would suggest you keep the following CSS in place, for minimal functionality without Popper:

.dropdown-menu-end {
  right: 0;
  left: auto;
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
}

These two are missing and much needed.

[rohit2sharma95]

this will now also require the correct data attribute for any placement, yes?

@mdo these data attributes are added to the dropdown menu automatically when it is not positioned by Popper. (Done in #32986). So these are not required to be added by the user.

bootstrap/js/src/dropdown.js

Lines 183 to 185 in 6fe75df

	if (isDisplayStatic) {
	Manipulator.setDataAttribute(this._menu, 'popper', 'static')
	}

[rohit2sharma95]

Or you intend to give Popper.js full power over the dropdown position and lock this plugin in this dependency?

Popper is already required for Dropdown, although you can disable the dynamic positioning if you want static position only.

I would suggest you keep the following CSS in place, for minimal functionality without Popper:

.dropdown-menu-end {
  right: 0;
  left: auto;
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
}

These styles are applied when the dropdown is not using Popper and these are not needed when Popper is used.

[thednp]

Yes, as of beta 3, they're missing. I mean you set a "dropup", no Popper, it's gonna work like "dropdown".

As for dropdown-menu-end, this

.dropdown-menu-end {
    --bs-position: end;
}

does absolutely nothing.