rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
js/src/dropdown.js
View File

@ -53,7 +53,10 @@ const Dropdown = (($) => {
const ClassName = {
DISABLED : 'disabled',
SHOW : 'show'
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) {

28
js/tests/visual/dropdown.html
View File

@ -59,8 +59,10 @@
</li>
</ul>
<div class="row">
<div class="col-sm-12 mt-4">
<!-- Default dropup button -->
<div class="btn-group dropup" style="margin-top: 60px;">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
@ -71,6 +73,30 @@
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is left-aligned
</button>
<div class="dropdown-menu dropdown-menu-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
</div>
<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>

14
scss/_dropdown.scss
View File

@ -108,20 +108,6 @@
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
right: 0;
left: auto !important; // Reset the default from `.dropdown-menu`
}
.dropdown-menu-left {
right: auto !important;
left: 0;
}
.dropdown-menu.show {
display: block;
}