Handle dropup for Dropdown
This commit is contained in:
parent
69de65180f
commit
53ee455bc7
|
@ -64,8 +64,13 @@ const Dropdown = (($) => {
|
||||||
VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)'
|
VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const AttachmentMap = {
|
||||||
|
TOP : 'top',
|
||||||
|
BOTTOM : 'bottom'
|
||||||
|
}
|
||||||
|
|
||||||
const Default = {
|
const Default = {
|
||||||
placement : 'bottom',
|
placement : AttachmentMap.BOTTOM,
|
||||||
offset : 0
|
offset : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -141,8 +146,10 @@ const Dropdown = (($) => {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handle dropup
|
||||||
|
const dropdownPlacement = $(this).parent().hasClass('dropup') ? AttachmentMap.TOP : context._config.placement
|
||||||
this._popper = new Popper(this, context._menu, {
|
this._popper = new Popper(this, context._menu, {
|
||||||
placement : context._config.placement,
|
placement : dropdownPlacement,
|
||||||
modifiers : {
|
modifiers : {
|
||||||
offset : {
|
offset : {
|
||||||
offset : context._config.offset
|
offset : context._config.offset
|
||||||
|
|
|
@ -456,7 +456,7 @@ $(function () {
|
||||||
assert.expect(1)
|
assert.expect(1)
|
||||||
var done = assert.async()
|
var done = assert.async()
|
||||||
|
|
||||||
var containerHTML = '<div>'
|
var containerHTML = '<div id="test">'
|
||||||
+ '<p style="margin-top: 200px">'
|
+ '<p style="margin-top: 200px">'
|
||||||
+ '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
|
+ '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
|
||||||
+ '</p>'
|
+ '</p>'
|
||||||
|
@ -482,7 +482,12 @@ $(function () {
|
||||||
})
|
})
|
||||||
.on('shown.bs.tooltip', function () {
|
.on('shown.bs.tooltip', function () {
|
||||||
var $tooltip = $($(this).data('bs.tooltip').tip)
|
var $tooltip = $($(this).data('bs.tooltip').tip)
|
||||||
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
|
if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
|
||||||
|
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top))
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
|
||||||
|
}
|
||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
.bootstrapTooltip('show')
|
.bootstrapTooltip('show')
|
||||||
|
|
|
@ -58,6 +58,19 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<!-- Default dropup button -->
|
||||||
|
<div class="btn-group dropup" style="margin-top: 60px;">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
|
<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
|
||||||
|
|
|
@ -23,6 +23,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||||
|
// Just add .dropup after the standard .dropdown class and you're set.
|
||||||
.dropup {
|
.dropup {
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
&::after {
|
&::after {
|
||||||
|
@ -133,9 +135,3 @@
|
||||||
color: $dropdown-header-color;
|
color: $dropdown-header-color;
|
||||||
white-space: nowrap; // as with > li > a
|
white-space: nowrap; // as with > li > a
|
||||||
}
|
}
|
||||||
|
|
||||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
||||||
//
|
|
||||||
// Just add .dropup after the standard .dropdown class and you're set.
|
|
||||||
|
|
||||||
//.dropup {}
|
|
||||||
|
|
Loading…
Reference in New Issue