diff options
Diffstat (limited to 'src/components/popover')
| -rw-r--r-- | src/components/popover/popover.js | 13 | ||||
| -rw-r--r-- | src/components/popover/popover.vue | 9 |
2 files changed, 18 insertions, 4 deletions
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 695f73b9..5e417fa0 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -21,7 +21,10 @@ const Popover = { // Replaces the classes you may want for the popover container. // Use 'popover-default' in addition to get the default popover // styles with your custom class. - popoverClass: String + popoverClass: String, + // If true, subtract padding when calculating position for the popover, + // use it when popover offset looks to be different on top vs bottom. + removePadding: Boolean }, data () { return { @@ -96,9 +99,15 @@ const Popover = { if (origin.y + content.offsetHeight > yBounds.max) usingTop = true if (origin.y - content.offsetHeight < yBounds.min) usingTop = false + let vPadding = 0 + if (this.removePadding && usingTop) { + const anchorStyle = getComputedStyle(anchorEl) + vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom) + } + const yOffset = (this.offset && this.offset.y) || 0 const translateY = usingTop - ? -anchorEl.offsetHeight - yOffset - content.offsetHeight + ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight : yOffset const xOffset = (this.offset && this.offset.x) || 0 diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 9b8680e5..020eab05 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -3,12 +3,13 @@ @mouseenter="onMouseenter" @mouseleave="onMouseleave" > - <div + <button ref="trigger" + class="button-unstyled -fullwidth popover-trigger-button" @click="onClick" > <slot name="trigger" /> - </div> + </button> <div v-if="!hidden" ref="content" @@ -30,6 +31,10 @@ <style lang="scss"> @import '../../_variables.scss'; +.popover-trigger-button { + display: block; +} + .popover { z-index: 8; position: absolute; |
