fix(MdSelect): adjust position when body has margin (#1551)

* adjust popper with body position * fix ci build error
vuematerial · Feb 28, 2018 · c820b72 · c820b72
1 parent ef0cd2f
commit c820b72
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/docs/app/pages/Components/Menu/Menu.vue b/docs/app/pages/Components/Menu/Menu.vue
@@ -175,20 +175,20 @@
         ]
       },
       events: {
-          headings: ['Name', 'Description', 'Value'],
-          props: [
-            {
-              name: 'md-opened',
-              description: 'Triggered when menu opens',
-              value: 'null'
-            },
-            {
-              name: 'md-closed',
-              description: 'Triggered when menu closes',
-              value: 'null'
-            }
-          ]
-        }      
+        headings: ['Name', 'Description', 'Value'],
+        props: [
+          {
+            name: 'md-opened',
+            description: 'Triggered when menu opens',
+            value: 'null'
+          },
+          {
+            name: 'md-closed',
+            description: 'Triggered when menu closes',
+            value: 'null'
+          }
+        ]
+      }      
     })
   }
 </script>
diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
@@ -181,9 +181,14 @@
         this.MdMenu.active = false
       },
       getOffsets () {
+        const relativePosition = this.getBodyPosition()
+
+        const offsetX = this.MdMenu.offsetX || 0
+        const offsetY = this.MdMenu.offsetY || 0
+        
         return {
-          offsetX: this.MdMenu.offsetX || 0,
-          offsetY: this.MdMenu.offsetY || 0
+          offsetX: offsetX - relativePosition.x,
+          offsetY: offsetY - relativePosition.y
         }
       },
       hasCustomOffsets () {
@@ -221,6 +226,15 @@
             max-width: ${this.MdMenu.instance.$el.offsetWidth}px
           `
         }
+      },
+      getBodyPosition() {
+        const body = document.body
+        const { top, left } = body.getBoundingClientRect()
+
+        const scrollLeft = window.pageXOffset !== undefined ? window.pageXOffset : body.scrollLeft
+        const scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : body.scrollTop
+
+        return { x: left + scrollLeft, y: top + scrollTop }
       }
     },
     mounted () {