rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reset styles when popper is calculating position

Browse source
This commit is contained in:
Martijn Cuppens 2020-12-16 22:09:26 +01:00
parent df763d6457
commit 28ca7cb9fd
2 changed files with 7 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
js/src/dropdown.js
View file

@ -57,6 +57,7 @@ const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend'
const CLASS_NAME_DROPSTART = 'dropstart'
const CLASS_NAME_NAVBAR = 'navbar'
const CLASS_NAME_POPPER_ACTIVE = 'popper-active'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
const SELECTOR_FORM_CHILD = '.dropdown form'
@ -174,7 +175,12 @@ class Dropdown extends BaseComponent {
}
}
// The `.popper-active` class removes the `right` property in CSS
// This way popper can position the dropdown correctly
// We add it back after the calculations to get control over our positioning with our CSS again
this._menu.classList.add(CLASS_NAME_POPPER_ACTIVE)
this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig())
this._menu.classList.remove(CLASS_NAME_POPPER_ACTIVE)
}
// If this is a touch-enabled device we add extra

2
scss/_dropdown.scss
View file

@ -34,7 +34,7 @@
@include box-shadow($dropdown-box-shadow);
// Reset positioning when positioned with Popper
&[style] {
&.popper-active {
right: auto#{"/* rtl:ignore */"} !important; // stylelint-disable-line declaration-no-important
}
}