From 432a7960e2ec394779e3fe998171281fc43abb8b Mon Sep 17 00:00:00 2001 From: c0bra Date: Mon, 22 Sep 2014 13:15:14 -0500 Subject: [PATCH] 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. --- src/js/core/directives/ui-grid-column-menu.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/js/core/directives/ui-grid-column-menu.js b/src/js/core/directives/ui-grid-column-menu.js index 98e9ae5b61..438e52b532 100644 --- a/src/js/core/directives/ui-grid-column-menu.js +++ b/src/js/core/directives/ui-grid-column-menu.js @@ -199,7 +199,14 @@ 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); @@ -207,11 +214,9 @@ angular.module('ui.grid').directive('uiGridColumnMenu', ['$log', '$timeout', '$w // 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