Bugfix(Column Menu): Fix positioning

Column menu should now position correctly with pinned containers and containers that are horizontally scrolled. NOTE: There is still an issue with pinning very large columns, causing the grid to wrap strangely.
angular-ui · Sep 22, 2014 · 432a796 · 432a796
1 parent d67b5ed
commit 432a796
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/js/core/directives/ui-grid-column-menu.js b/src/js/core/directives/ui-grid-column-menu.js
@@ -199,19 +199,24 @@ angular.module('ui.grid').directive('uiGridColumnMenu', ['$log', '$timeout', '$w
             // var containerScrollLeft = $columnelement
             var containerId = column.renderContainer ? column.renderContainer : 'body';
             var renderContainer = column.grid.renderContainers[containerId];
-            var containerScrolLeft = renderContainer.prevScrollLeft;
+            // var containerScrolLeft = renderContainer.prevScrollLeft;
+
+            // It's possible that the render container of the column we're attaching to is offset from the grid (i.e. pinned containers), we
+            //   need to get the different in the offsetLeft between the render container and the grid
+            var renderContainerElm = gridUtil.closestElm($columnElement, '.ui-grid-render-container');
+            var renderContainerOffset = renderContainerElm.offsetLeft - $scope.grid.element[0].offsetLeft;
+
+            var containerScrolLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft;
 
             var myWidth = gridUtil.elementWidth($scope.menu, true);
 
             // TODO(c0bra): use padding-left/padding-right based on document direction (ltr/rtl), place menu on proper side
             // Get the column menu right padding
             var paddingRight = parseInt(angular.element($scope.menu).css('padding-right'), 10);
 
-            $log.debug('position', left + ' + ' + width + ' - ' + myWidth + ' + ' + paddingRight);
+            // $log.debug('position', left + ' + ' + width + ' - ' + myWidth + ' + ' + paddingRight);
 
-            // $elm.css('left', (left - offset + width - myWidth + paddingRight) + 'px');
-            // $elm.css('left', (left + width - myWidth + paddingRight) + 'px');
-            $elm.css('left', (left - containerScrolLeft + width - myWidth + paddingRight) + 'px');
+            $elm.css('left', (left + renderContainerOffset - containerScrolLeft + width - myWidth + paddingRight) + 'px');
             $elm.css('top', (top + height) + 'px');
 
             // Hide the menu on a click on the document