Remove .dropdown-menu[style] reset and adjust .dropdown-menu-* modifiers
- Removes the &[style] selector that was used for resetting Popper styles - Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
This commit is contained in:
Mark Otto
XhmikosR
parent
a2b56de707
commit
8f1c882545
|
|
@ -156,7 +156,9 @@ class Dropdown extends BaseComponent {
|
|||
}
|
||||
|
||||
// Totally disable Popper for Dropdowns in Navbar
|
||||
if (!this._inNavbar) {
|
||||
if (this._inNavbar) {
|
||||
Manipulator.setDataAttribute(this._menu, 'popper', 'none')
|
||||
} else {
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
|
||||
}
|
||||
|
|
@ -176,7 +178,14 @@ class Dropdown extends BaseComponent {
|
|||
referenceElement = this._config.reference
|
||||
}
|
||||
|
||||
this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig())
|
||||
const popperConfig = this._getPopperConfig()
|
||||
const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
|
||||
|
||||
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
|
||||
|
|
@ -218,6 +227,7 @@ class Dropdown extends BaseComponent {
|
|||
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW)
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW)
|
||||
Manipulator.removeDataAttribute(this._menu, 'popper')
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
|
||||
}
|
||||
|
||||
|
|
@ -421,6 +431,7 @@ class Dropdown extends BaseComponent {
|
|||
|
||||
dropdownMenu.classList.remove(CLASS_NAME_SHOW)
|
||||
toggles[i].classList.remove(CLASS_NAME_SHOW)
|
||||
Manipulator.removeDataAttribute(dropdownMenu, 'popper')
|
||||
EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1006,13 +1006,44 @@ describe('Dropdown', () => {
|
|||
|
||||
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
|
||||
const dropdown = new Dropdown(btnDropdown)
|
||||
|
||||
btnDropdown.addEventListener('shown.bs.dropdown', () => {
|
||||
expect(dropdown._popper).toBeNull()
|
||||
expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by Popper')
|
||||
done()
|
||||
})
|
||||
|
||||
btnDropdown.click()
|
||||
dropdown.show()
|
||||
})
|
||||
|
||||
it('should manage bs attribute `data-bs-popper`="none" when dropdown is in navbar', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
|
||||
' <div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Secondary link</a>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
'</nav>'
|
||||
].join('')
|
||||
|
||||
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
|
||||
const dropdown = new Dropdown(btnDropdown)
|
||||
|
||||
btnDropdown.addEventListener('shown.bs.dropdown', () => {
|
||||
expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('none')
|
||||
dropdown.hide()
|
||||
})
|
||||
|
||||
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
|
||||
expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
|
||||
done()
|
||||
})
|
||||
|
||||
dropdown.show()
|
||||
})
|
||||
|
||||
it('should not use Popper if display set to static', done => {
|
||||
|
|
@ -1037,6 +1068,33 @@ describe('Dropdown', () => {
|
|||
btnDropdown.click()
|
||||
})
|
||||
|
||||
it('should manage bs attribute `data-bs-popper`="static" when display set to static', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Secondary link</a>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
|
||||
const dropdown = new Dropdown(btnDropdown)
|
||||
|
||||
btnDropdown.addEventListener('shown.bs.dropdown', () => {
|
||||
expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
|
||||
dropdown.hide()
|
||||
})
|
||||
|
||||
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
|
||||
expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
|
||||
done()
|
||||
})
|
||||
|
||||
dropdown.show()
|
||||
})
|
||||
|
||||
it('should remove "show" class if tabbing outside of menu', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="dropdown">',
|
||||
|
|
|
|||
|
|
@ -32,11 +32,6 @@
|
|||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Reset positioning when positioned with Popper
|
||||
&[style] {
|
||||
right: auto#{"/* rtl:ignore */"} !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start responsive-breakpoints
|
||||
|
|
@ -49,14 +44,20 @@
|
|||
|
||||
.dropdown-menu#{$infix}-start {
|
||||
--bs-position: start;
|
||||
right: auto #{"/* rtl:ignore */"};
|
||||
left: 0 #{"/* rtl:ignore */"};
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: auto #{"/* rtl:ignore */"};
|
||||
left: 0 #{"/* rtl:ignore */"};
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu#{$infix}-end {
|
||||
--bs-position: end;
|
||||
right: 0 #{"/* rtl:ignore */"};
|
||||
left: auto #{"/* rtl:ignore */"};
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: 0 #{"/* rtl:ignore */"};
|
||||
left: auto #{"/* rtl:ignore */"};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
|
|||
|
||||
{{< example >}}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
|
|
@ -635,10 +635,12 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
|
|||
|
||||
## Menu alignment
|
||||
|
||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side.
|
||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes.
|
||||
|
||||
Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side.
|
||||
|
||||
{{< callout info >}}
|
||||
**Heads up!** Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).
|
||||
**Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
|
|
@ -690,6 +692,89 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
|
|||
|
||||
Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars.
|
||||
|
||||
### Alignment options
|
||||
|
||||
Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Right-aligned menu
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
Left-aligned, right-aligned lg
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-lg-end">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
Right-aligned, left-aligned lg
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropstart
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropend
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Menu content
|
||||
|
||||
### Headers
|
||||
|
|
|
|||
Loading…
Reference in New Issue