Permalink
Browse files

fix(dropdown): use class `position-static` instead of inline style (#…

  • Loading branch information...
tmorehouse committed Dec 12, 2017
1 parent 117e68f commit fc493259aee8fd0f4a806c69a3844e63b80ede3a
@@ -73,7 +73,7 @@ export default {
)
return h(
'div',
{ attrs: { id: t.safeId() }, class: t.dropdownClasses, style: t.dropdownStyles },
{ attrs: { id: t.safeId() }, class: t.dropdownClasses },
[ split, toggle, menu ]
)
},
@@ -111,24 +111,21 @@ export default {
},
computed: {
dropdownClasses () {
let position = ''
// Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
// See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
if (this.boundary === 'scrollParent' || !this.boundary) {
position = 'position-static'
}
return [
'btn-group',
'b-dropdown',
'dropdown',
this.dropup ? 'dropup' : '',
this.visible ? 'show' : ''
this.visible ? 'show' : '',
position
]
},
dropdownStyles () {
// Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
// See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
if (this.boundary === 'scrollParent' || !this.boundary) {
return {}
}
// We enable this feature only when the user supplies a boundary other than `scrollParent`
// to preserve default functionality
return { position: 'static' }
},
menuClasses () {
return [
'dropdown-menu',
@@ -58,7 +58,21 @@ describe('dropdown', async () => {
.find(node => node.tagName === 'BUTTON' && node.id === `${dd_8.safeId('_BV_toggle_')}`)
expect(toggle).toHaveClass('dropdown-toggle')
})
/*
it('boundary set to viewport should have class position-static', async () => {
const {app: {$refs}} = window
const {dd_9} = $refs
expect(dd_9).toHaveClass('position-static')
})
it('boundary not set should not have class position-static', async () => {
const {app: {$refs}} = window
const {dd_1} = $refs
expect(dd_1).not.toHaveClass('position-static')
})
*/
it('dd-item should render as link by default', async () => {
const {app: {$refs}} = window
const {dd_6} = $refs
@@ -9,8 +9,7 @@
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
<br>
<br>
<br><br>
<b-dropdown ref="dd_2"
text="Split Dropdown Button"
@@ -22,8 +21,7 @@
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
<br>
<br>
<br><br>
<b-dropdown ref="dd_3"
text="Right align"
@@ -35,8 +33,7 @@
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
<br>
<br>
<br><br>
<b-dropdown ref="dd_4"
text="Drop-Up"
@@ -48,8 +45,7 @@
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
<br>
<br>
<br><br>
<b-dd ref="dd_5"
text="Link"
@@ -68,6 +64,8 @@
<b-dropdown-divider></b-dropdown-divider>
</b-dropdown>
<br><br>
<b-dropdown ref="dd_7" text="Dropdown" variant="link" no-caret>
<template slot="button-content">
<span>icon</span>
@@ -78,9 +76,18 @@
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
<br><br>
<b-dropdown ref="dd_8" text="Dropdown" no-caret split>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
<br><br>
<b-dropdown ref="dd_9" text="Dropdown" boundary="viewport">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
</b-dropdown>
</div>

0 comments on commit fc49325

Please sign in to comment.