Fix incorrect position of column selector in MPR (#11953) (#11968)

* Fix incorrect position of column selector in MPR (#11953)

Cherry pick from
https://github.com/vaadin/framework/pull/11946

3 files changed, 7 insertions, 3 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/VContextMenu.java b/client/src/main/java/com/vaadin/client/ui/VContextMenu.java
index a27b93fa40..9ed3fccfe0 100644
--- a/client/src/main/java/com/vaadin/client/ui/VContextMenu.java
+++ b/client/src/main/java/com/vaadin/client/ui/VContextMenu.java
@@ -21,6 +21,7 @@ import java.util.Locale;
 import com.google.gwt.core.client.Scheduler;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NodeList;
+import com.google.gwt.dom.client.Style;
 import com.google.gwt.dom.client.TableRowElement;
 import com.google.gwt.dom.client.TableSectionElement;
 import com.google.gwt.event.dom.client.BlurEvent;
@@ -155,6 +156,7 @@ public class VContextMenu extends VOverlay implements SubPartAware {
                 setHeight(Window.getClientHeight() + "px");
             }
             setPopupPosition(menuLeft, menuTop);
+            getElement().getStyle().setPosition(Style.Position.FIXED);
 
             /*
              * Move keyboard focus to menu, deferring the focus setting so the
diff --git a/compatibility-client/src/main/java/com/vaadin/v7/client/ui/VScrollTable.java b/compatibility-client/src/main/java/com/vaadin/v7/client/ui/VScrollTable.java
index 36b1468bbd..4b0a52c1bd 100644
--- a/compatibility-client/src/main/java/com/vaadin/v7/client/ui/VScrollTable.java
+++ b/compatibility-client/src/main/java/com/vaadin/v7/client/ui/VScrollTable.java
@@ -3931,10 +3931,12 @@ public class VScrollTable extends FlowPanel
         public void onBrowserEvent(Event event) {
             if (enabled) {
                 if (event.getEventTarget().cast() == columnSelector) {
-                    final int left = DOM.getAbsoluteLeft(columnSelector);
-                    final int top = DOM.getAbsoluteTop(columnSelector)
+                    WidgetUtil.TextRectangle clientRect = WidgetUtil
+                            .getBoundingClientRect(columnSelector);
+                    final int left = (int) clientRect.getLeft();
+                    final int top = (int) (clientRect.getTop()
                             + DOM.getElementPropertyInt(columnSelector,
-                                    "offsetHeight");
+                                    "offsetHeight"));
                     client.getContextMenu().showAt(this, left, top);
                 }
             }
diff --git a/uitest/reference-screenshots/chrome/TableTooManyColumnsTest-testDropdownTable_ANY_Chrome__init.png b/uitest/reference-screenshots/chrome/TableTooManyColumnsTest-testDropdownTable_ANY_Chrome__init.png
index 41b5011265..646555a3c0 100755
--- a/uitest/reference-screenshots/chrome/TableTooManyColumnsTest-testDropdownTable_ANY_Chrome__init.png
+++ b/uitest/reference-screenshots/chrome/TableTooManyColumnsTest-testDropdownTable_ANY_Chrome__init.png