aboutsummaryrefslogtreecommitdiff
path: root/src/components/popover
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/popover')
-rw-r--r--src/components/popover/popover.js13
-rw-r--r--src/components/popover/popover.vue9
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;