diff options
| author | Rohit Sharma <[email protected]> | 2021-02-10 00:34:23 +0530 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-02-09 21:04:23 +0200 |
| commit | 29e0c9dfa1c4324e4e2a8cf0b66e27b9e72f09a5 (patch) | |
| tree | dd1d4cf3ea6fd81a51089919c45c230db6fe6c09 | |
| parent | 91d3da1f3dca3127d50b81928c01d4bd63054269 (diff) | |
| download | bootstrap-29e0c9dfa1c4324e4e2a8cf0b66e27b9e72f09a5.tar.xz bootstrap-29e0c9dfa1c4324e4e2a8cf0b66e27b9e72f09a5.zip | |
Dropdown — Change the selector to check the use of Popper (#33003)
* 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 <[email protected]>
| -rw-r--r-- | js/src/dropdown.js | 4 | ||||
| -rw-r--r-- | scss/_dropdown.scss | 11 |
2 files changed, 6 insertions, 9 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 378668a6d..878a5a9a2 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -181,11 +181,11 @@ class Dropdown extends BaseComponent { const popperConfig = this._getPopperConfig() const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false) + this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) + if (isDisplayStatic) { Manipulator.setDataAttribute(this._menu, 'popper', 'static') } - - this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) } // If this is a touch-enabled device we add extra diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index b6184d2ad..b71058c58 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -34,6 +34,7 @@ &[data-bs-popper] { left: 0; + margin-top: $dropdown-spacer; } } @@ -73,7 +74,7 @@ top: auto; bottom: 100%; - &.show:not([data-popper-placement]) { + &[data-bs-popper] { margin-top: 0; margin-bottom: $dropdown-spacer; } @@ -90,7 +91,7 @@ right: auto; left: 100%; - &.show:not([data-popper-placement]) { + &[data-bs-popper] { margin-top: 0; margin-left: $dropdown-spacer; } @@ -110,7 +111,7 @@ right: 100%; left: auto; - &.show:not([data-popper-placement]) { + &[data-bs-popper] { margin-top: 0; margin-right: $dropdown-spacer; } @@ -187,10 +188,6 @@ .dropdown-menu.show { display: block; - - &:not([data-popper-placement]) { - margin-top: $dropdown-spacer; - } } // Dropdown section headers |