fix popovers cutting off in notifications, port popover changes from chats mr

1 files changed, 10 insertions, 1 deletions

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5881d266..f1abe3ad 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -10,6 +10,9 @@ const Popover = {
     // 'container' for using offsetParent as boundaries for either axis
     // or 'viewport'
     boundTo: Object,
+    // Takes a selector to use as a replacement for the parent container
+    // for getting boundaries for x an y axis
+    boundToSelector: String,
     // Takes a top/bottom/left/right object, how much space to leave
     // between boundary and popover element
     margin: Object,
@@ -27,6 +30,11 @@ const Popover = {
     }
   },
   methods: {
+    containerBoundingClientRect () {
+      const container = this.boundToSelector ? document.querySelector(this.boundToSelector) : this.$el.offsetParent
+      console.log('test', container)
+      return container.getBoundingClientRect()
+    },
     updateStyles () {
       if (this.hidden) {
         this.styles = {
@@ -45,7 +53,8 @@ const Popover = {
       // Minor optimization, don't call a slow reflow call if we don't have to
       const parentBounds = this.boundTo &&
         (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
-        this.$el.offsetParent.getBoundingClientRect()
+        this.containerBoundingClientRect()
+
       const margin = this.margin || {}
 
       // What are the screen bounds for the popover? Viewport vs container