From f356721fb2694cdf91e623333a49f1d80a7be1b3 Mon Sep 17 00:00:00 2001
From: Chelsea Ma <chelseama@ChelseaMas-MacBook-Pro.local>
Date: Wed, 10 Oct 2018 11:45:51 -0400
Subject: [PATCH 1/2] removed top and left

---
 .DS_Store            | Bin 0 -> 6148 bytes
 src/PivotTableUI.jsx |  14 ++++----------
 2 files changed, 4 insertions(+), 10 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/src/PivotTableUI.jsx b/src/PivotTableUI.jsx
index 0cb94f8..f6a831e 100644
--- a/src/PivotTableUI.jsx
+++ b/src/PivotTableUI.jsx
@@ -12,7 +12,7 @@ import Draggable from 'react-draggable';
 export class DraggableAttribute extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {open: false, top: 0, left: 0, filterText: ''};
+    this.state = {open: false, filterText: ''};
   }
 
   toggleValue(value) {
@@ -54,9 +54,7 @@ export class DraggableAttribute extends React.Component {
           style={{
             display: 'block',
             cursor: 'initial',
-            zIndex: this.props.zIndex,
-            top: this.state.top + 'px',
-            left: this.state.left + 'px',
+            zIndex: this.props.zIndex
           }}
           onClick={() => this.props.moveFilterBoxToTop(this.props.name)}
         >
@@ -136,13 +134,9 @@ export class DraggableAttribute extends React.Component {
     );
   }
 
-  toggleFilterBox(event) {
-    const bodyRect = document.body.getBoundingClientRect();
-    const rect = event.nativeEvent.target.getBoundingClientRect();
+  toggleFilterBox() {
     this.setState({
-      open: !this.state.open,
-      top: 10 + rect.top - bodyRect.top,
-      left: 10 + rect.left - bodyRect.left,
+      open: !this.state.open
     });
     this.props.moveFilterBoxToTop(this.props.name);
   }

From 8060e7898520230ad8fbe37039634c0af427dc8f Mon Sep 17 00:00:00 2001
From: Chelsea Ma <chelseama@ChelseaMas-MacBook-Pro.local>
Date: Wed, 17 Oct 2018 16:41:11 -0400
Subject: [PATCH 2/2] fixed unnecessary changes

---
 src/PivotTableUI.jsx | 16 ++++++++++++----
 src/pivottable.css   |  1 +
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/PivotTableUI.jsx b/src/PivotTableUI.jsx
index f6a831e..fd4acdf 100644
--- a/src/PivotTableUI.jsx
+++ b/src/PivotTableUI.jsx
@@ -12,7 +12,7 @@ import Draggable from 'react-draggable';
 export class DraggableAttribute extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {open: false, filterText: ''};
+    this.state = {open: false, top: 0, left: 0, filterText: ''};
   }
 
   toggleValue(value) {
@@ -54,7 +54,9 @@ export class DraggableAttribute extends React.Component {
           style={{
             display: 'block',
             cursor: 'initial',
-            zIndex: this.props.zIndex
+            zIndex: this.props.zIndex,
+            top: this.state.top + 'px',
+            left: this.state.left + 'px',
           }}
           onClick={() => this.props.moveFilterBoxToTop(this.props.name)}
         >
@@ -134,9 +136,15 @@ export class DraggableAttribute extends React.Component {
     );
   }
 
-  toggleFilterBox() {
+  toggleFilterBox(event) {
+    const relativeRect = document
+      .querySelector('.pvtUi')
+      .getBoundingClientRect();
+    const rect = event.nativeEvent.target.getBoundingClientRect();
     this.setState({
-      open: !this.state.open
+      open: !this.state.open,
+      top: 10 + rect.top - relativeRect.top,
+      left: 10 + rect.left - relativeRect.left,
     });
     this.props.moveFilterBoxToTop(this.props.name);
   }
diff --git a/src/pivottable.css b/src/pivottable.css
index e7b868f..068f9e0 100644
--- a/src/pivottable.css
+++ b/src/pivottable.css
@@ -2,6 +2,7 @@
     color: #2a3f5f;
     font-family: Verdana;
     border-collapse: collapse;
+    position: relative;
 }
 .pvtUi select {
     user-select: none;