#119 fix scrolled positioning

Fix position of menu when a contenteditable is scrolled. Not all elements in the DOM hierarchy are considered during offsetParent traversal during coordinate calculation, and the scrollable div is sometimes missed and it’s scrolled state not considered. Make sure to consider all scrollable elements up the hierarchy.
jeff-collins · Sep 22, 2015 · e4b90f1 · e4b90f1
1 parent f48371a
commit e4b90f1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/dist/mentio.js b/dist/mentio.js
@@ -606,7 +606,8 @@ angular.module('mentio', [])
                 scope.adjustScroll = function (direction) {
                     var menuEl = element[0];
                     var menuItemsList = menuEl.querySelector('ul');
-                    var menuItem = (menuEl.querySelector('[mentio-menu-item].active') || menuEl.querySelector('[data-mentio-menu-item].active'));
+                    var menuItem = (menuEl.querySelector('[mentio-menu-item].active') || 
+                        menuEl.querySelector('[data-mentio-menu-item].active'));
 
                     if (scope.isFirstItemActive()) {
                         return menuItemsList.scrollTop = 0;
@@ -703,7 +704,7 @@ angular.module('mentio')
                     top: coordinates.top + 'px',
                     left: coordinates.left + 'px',
                     position: 'absolute',
-                    zIndex: 100,
+                    zIndex: 10000,
                     display: 'block'
                 });
 
@@ -1116,19 +1117,30 @@ angular.module('mentio')
             var obj = element;
             var iframe = ctx ? ctx.iframe : null;
             while(obj) {
-                coordinates.left += obj.offsetLeft;
-                coordinates.top += obj.offsetTop;
-                if (obj !== getDocument().body) {
+                coordinates.left += obj.offsetLeft + obj.clientLeft;
+                coordinates.top += obj.offsetTop + obj.clientTop;
+                obj = obj.offsetParent;
+                if (!obj && iframe) {
+                    obj = iframe;
+                    iframe = null;
+                }
+            }            
+            obj = element;
+            iframe = ctx ? ctx.iframe : null;
+            while(obj !== getDocument().body) {
+                if (obj.scrollTop && obj.scrollTop > 0) {
                     coordinates.top -= obj.scrollTop;
+                }
+                if (obj.scrollLeft && obj.scrollLeft > 0) {
                     coordinates.left -= obj.scrollLeft;
                 }
-                obj = obj.offsetParent;
+                obj = obj.parentNode;
                 if (!obj && iframe) {
                     obj = iframe;
                     iframe = null;
                 }
             }            
-        }
+         }
 
         function getTextAreaOrInputUnderlinePosition (ctx, element, position) {
             var properties = [

diff --git a/dist/mentio.min.js b/dist/mentio.min.js
diff --git a/ment.io/styles.css b/ment.io/styles.css
@@ -1,5 +1,5 @@
 .editor {
-	height: auto;
+	overflow: auto;
     min-height: 140px;
 }
 

diff --git a/src/mentio.directive.js b/src/mentio.directive.js
@@ -606,7 +606,8 @@ angular.module('mentio', [])
                 scope.adjustScroll = function (direction) {
                     var menuEl = element[0];
                     var menuItemsList = menuEl.querySelector('ul');
-                    var menuItem = (menuEl.querySelector('[mentio-menu-item].active') || menuEl.querySelector('[data-mentio-menu-item].active'));
+                    var menuItem = (menuEl.querySelector('[mentio-menu-item].active') || 
+                        menuEl.querySelector('[data-mentio-menu-item].active'));
 
                     if (scope.isFirstItemActive()) {
                         return menuItemsList.scrollTop = 0;

diff --git a/src/mentio.service.js b/src/mentio.service.js
@@ -22,7 +22,7 @@ angular.module('mentio')
                     top: coordinates.top + 'px',
                     left: coordinates.left + 'px',
                     position: 'absolute',
-                    zIndex: 100,
+                    zIndex: 10000,
                     display: 'block'
                 });
 
@@ -435,19 +435,30 @@ angular.module('mentio')
             var obj = element;
             var iframe = ctx ? ctx.iframe : null;
             while(obj) {
-                coordinates.left += obj.offsetLeft;
-                coordinates.top += obj.offsetTop;
-                if (obj !== getDocument().body) {
+                coordinates.left += obj.offsetLeft + obj.clientLeft;
+                coordinates.top += obj.offsetTop + obj.clientTop;
+                obj = obj.offsetParent;
+                if (!obj && iframe) {
+                    obj = iframe;
+                    iframe = null;
+                }
+            }            
+            obj = element;
+            iframe = ctx ? ctx.iframe : null;
+            while(obj !== getDocument().body) {
+                if (obj.scrollTop && obj.scrollTop > 0) {
                     coordinates.top -= obj.scrollTop;
+                }
+                if (obj.scrollLeft && obj.scrollLeft > 0) {
                     coordinates.left -= obj.scrollLeft;
                 }
-                obj = obj.offsetParent;
+                obj = obj.parentNode;
                 if (!obj && iframe) {
                     obj = iframe;
                     iframe = null;
                 }
             }            
-        }
+         }
 
         function getTextAreaOrInputUnderlinePosition (ctx, element, position) {
             var properties = [