From bf037b3dd75085ce7dae82b65c65e0ff724f2c3a Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 30 Nov 2015 19:34:23 +0100
Subject: [PATCH] Fixes: U4-7440 Grid - Controls overlay is cut of by the tree

---
 .../overlays/umboverlay.directive.js          | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
index 1985c9c699..b9fae638ef 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
@@ -144,8 +144,12 @@
 
          function setTargetPosition() {
 
-            var viewportWidth = null;
-            var viewportHeight = null;
+            var container = $("#contentwrapper");
+            var containerLeft = container[0].offsetLeft;
+            var containerRight = containerLeft + container[0].offsetWidth;
+            var containerTop = container[0].offsetTop;
+            var containerBottom = containerTop + container[0].offsetHeight;
+
             var mousePositionClickX = null;
             var mousePositionClickY = null;
             var elementHeight = null;
@@ -161,10 +165,6 @@
             // if mouse click position is know place element with mouse in center
             if (scope.model.event && scope.model.event) {
 
-               // viewport size
-               viewportWidth = $(window).innerWidth();
-               viewportHeight = $(window).innerHeight();
-
                // click position
                mousePositionClickX = scope.model.event.pageX;
                mousePositionClickY = scope.model.event.pageY;
@@ -179,17 +179,29 @@
 
                // check to see if element is outside screen
                // outside right
-               if (position.left + elementWidth > viewportWidth) {
-                  position.right = 0;
+               if (position.left + elementWidth > containerRight) {
+                  position.right = 10;
                   position.left = "inherit";
                }
 
                // outside bottom
-               if (position.top + elementHeight > viewportHeight) {
-                  position.bottom = 0;
+               if (position.top + elementHeight > containerBottom) {
+                  position.bottom = 10;
                   position.top = "inherit";
                }
 
+               // outside left
+               if (position.left < containerLeft) {
+                  position.left = containerLeft + 10;
+                  position.right = "inherit";
+               }
+
+               // outside top
+               if (position.top < containerTop) {
+                  position.top = 10;
+                  position.bottom = "inherit";
+               }
+
                el.css(position);
 
             }