mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 06:36:33 +02:00
Code Issues Releases Wiki Activity

Dropdown — Change the selector to check the use of Popper (#33003)

Browse Source 
* Create the popper instance first

Make sure that popper instance has been created first and then apply the
styling on the dropdown(menu)

* Use `data-bs-popper` attibute to check popper

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Rohit Sharma
2021-02-10 00:34:23 +05:30
committed by GitHub
parent 91d3da1f3d
commit 29e0c9dfa1
2 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/dropdown.js
View File

@@ -181,11 +181,11 @@ class Dropdown extends BaseComponent {
const popperConfig = this._getPopperConfig() const popperConfig = this._getPopperConfig()
const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false) const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
if (isDisplayStatic) { if (isDisplayStatic) {
Manipulator.setDataAttribute(this._menu, 'popper', 'static') Manipulator.setDataAttribute(this._menu, 'popper', 'static')
} }
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
} }
// If this is a touch-enabled device we add extra // If this is a touch-enabled device we add extra

11
scss/_dropdown.scss
View File

@@ -34,6 +34,7 @@
&[data-bs-popper] { &[data-bs-popper] {
left: 0; left: 0;
margin-top: $dropdown-spacer;
} }
} }
@@ -73,7 +74,7 @@
top: auto; top: auto;
bottom: 100%; bottom: 100%;
&.show:not([data-popper-placement]) { &[data-bs-popper] {
margin-top: 0; margin-top: 0;
margin-bottom: $dropdown-spacer; margin-bottom: $dropdown-spacer;
} }
@@ -90,7 +91,7 @@
right: auto; right: auto;
left: 100%; left: 100%;
&.show:not([data-popper-placement]) { &[data-bs-popper] {
margin-top: 0; margin-top: 0;
margin-left: $dropdown-spacer; margin-left: $dropdown-spacer;
} }
@@ -110,7 +111,7 @@
right: 100%; right: 100%;
left: auto; left: auto;
&.show:not([data-popper-placement]) { &[data-bs-popper] {
margin-top: 0; margin-top: 0;
margin-right: $dropdown-spacer; margin-right: $dropdown-spacer;
} }
@@ -187,10 +188,6 @@
.dropdown-menu.show { .dropdown-menu.show {
display: block; display: block;
&:not([data-popper-placement]) {
margin-top: $dropdown-spacer;
}
} }
// Dropdown section headers // Dropdown section headers