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

Use popper to align dropdown menu instead of using css with important

Browse source
This commit is contained in:
Johann-S 2017-05-17 22:03:11 +02:00 • committed by GitHub
parent be742b0f5c
commit b36d8ae6cb
3 changed files with 65 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

31
js/src/dropdown.js
View file

@ -52,8 +52,11 @@ const Dropdown = (($) => {
}
const ClassName = {
DISABLED : 'disabled',
SHOW : 'show'
DISABLED : 'disabled',
SHOW : 'show',
DROPUP : 'dropup',
MENURIGHT : 'dropdown-menu-right',
MENULEFT : 'dropdown-menu-left'
}
const Selector = {
@ -142,7 +145,7 @@ const Dropdown = (($) => {
}
// Handle dropup
const dropdownPlacement = $(this._element).parent().hasClass('dropup') ? AttachmentMap.TOP : this._config.placement
const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement
this._popper = new Popper(this._element, this._menu, {
placement : dropdownPlacement,
modifiers : {
@ -151,6 +154,11 @@ const Dropdown = (($) => {
},
flip : {
enabled : this._config.flip
},
beforeApplyStyle: {
order: 899, // 900 is the order of applyStyle
enabled: true,
fn: this._beforePopperApplyStyle
}
}
})
@ -230,6 +238,23 @@ const Dropdown = (($) => {
return this._menu
}
_beforePopperApplyStyle(data) {
if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) {
data.styles = {
right: 0,
left: 'auto'
}
}
if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) {
data.styles = {
right: 'auto',
left: 0
}
}
return data
}
// static
static _jQueryInterface(config) {