Column menu positioning bug in a 'horizontal scrolled'-grid in Firefox

[DaAitch]

Reproduce:

• open this plunkr in latest firefox (just googled for any plunkr with latest ui-grid and many columns in it)
• scroll grid to the very right
• open column menu
• see, that the menu is left aligned in the grid viewport (and working in latest Chrome and IE)

Analysis:
In ui-grid there is a uiGridColumnMenuService::getColumnElementPosition-Method, returning a to chrome different value of positionData.parentLeft which is zero in Firefox.

Possible Conclusion:
Firefox is using a different implementation of offsetParent?

Quick-(dirty)-fix:

  getColumnElementPosition: function( $scope, column, $columnElement ){
      var positionData = {};
      positionData.left = $columnElement[0].offsetLeft;
      positionData.top = $columnElement[0].offsetTop;
      positionData.parentLeft = $columnElement[0].offsetParent.offsetLeft;

      // chrome
      var domColumnElementOffsetParent = $columnElement[0].offsetParent;

      // firefox
      if(!angular.element(domColumnElementOffsetParent).hasClass('ui-grid-header-cell-wrapper')) {
        domColumnElementOffsetParent = domColumnElementOffsetParent.offsetParent;
      }
      positionData.parentLeft = domColumnElementOffsetParent.offsetLeft;

      // Get the grid scrollLeft
      positionData.offset = 0;
      if (column.grid.options.offsetLeft) {
        positionData.offset = column.grid.options.offsetLeft;
      }

      positionData.height = gridUtil.elementHeight($columnElement, true);
      positionData.width = gridUtil.elementWidth($columnElement, true);

      return positionData;
    },

As this is just a hack, I'm no going to provide a pull-request for this.

[andresbiso]

Thanks @PhilippHToner!

Your quick-dirty-fix fixed my problem.

Here is how I use it (this way you don't have to change the ui-grid source code);

• Create a ui-grid-menu-decorator.js

'use strict';
angular
  .module('app.core')
  .config(uiGridColumnMenuConfig);

uiGridColumnMenuConfig.$inject = ['$provide'];

function uiGridColumnMenuConfig($provide) {
  $provide.decorator('uiGridColumnMenuService', extendUiGridColumnMenuService);
}

extendUiGridColumnMenuService.$inject = ['$delegate', 'gridUtil'];

function extendUiGridColumnMenuService($delegate, gridUtil) {

  // wrap and overwrite uiGridColumnMenuService object methods
  /* jshint ignore:start */
  var getDirection;
  getDirection = $delegate.getColumnElementPosition;
  /* jshint ignore:end */

  $delegate.getColumnElementPosition = function ($scope, column, $columnElement) {
      var positionData, domColumnElementOffsetParent;
      positionData = {};
      positionData.left = $columnElement[0].offsetLeft;
      positionData.top = $columnElement[0].offsetTop;
      positionData.parentLeft = $columnElement[0].offsetParent.offsetLeft;

      // chrome
      domColumnElementOffsetParent = $columnElement[0].offsetParent;

      // firefox
      if (!angular.element(domColumnElementOffsetParent).hasClass('ui-grid-header-cell-wrapper')) {
        domColumnElementOffsetParent = domColumnElementOffsetParent.offsetParent;
      }
      positionData.parentLeft = domColumnElementOffsetParent.offsetLeft;

      // Get the grid scrollLeft
      positionData.offset = 0;
      if (column.grid.options.offsetLeft) {
        positionData.offset = column.grid.options.offsetLeft;
      }

      positionData.height = gridUtil.elementHeight($columnElement, true);
      positionData.width = gridUtil.elementWidth($columnElement, true);

      return positionData;
    };

  return $delegate;
}

• Remember to include it in your index.html

<script src="app/core/core-decorators/ui-grid-menu-decorator.js"></script>

[caseyjhol]

Firefox appears to be implementing offsetParent correctly, while IE and Chrome are not. It's supposed to return the nearest positioned element. In this case, it's actually .ui-grid-header-cell-row which has position: relative and an offsetLeft of 0. Chrome and IE return .ui-grid-header-cell-wrapper as the offsetParent, which is incorrect.

It looks like if an element has display: table-row, Chrome and IE are ignoring it as being positioned. See the console: https://jsfiddle.net/caseyjhol/q0wdegas/6/.

[msp444]

Thank you andresbiso for your comment. This problem still existed for us in Firefox. I was able to implement your fix with 1 minor tweak: I had to change the module reference to 'ui.grid'