fix(uiGrid): Fix elm height calc for hidden grids

The header row height could not be calculated when the grid was hidden,
because the absolutely-positioned cells did not count towards the
container height.

To fix this, I made changes to the elementHeight/elementWidth functions
that will, if the element in question is hidden, append the element to the
document body with visibility: hidden.

I also had to switch the cells from being absolutely positioned to
relatively positioned and floated left.  Hopefully this will not have any
further repercussions

Author: c0bra

src/js/core/directives/ui-grid-style.js

@@ -68,7 +68,8 @@
             var ret = '';
             var left = 0;
             uiGridCtrl.grid.options.columnDefs.forEach(function(c, i) {
-              ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + i + ' { width: ' + equalWidth + 'px; left: ' + left + 'px; }';
+              // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + i + ' { width: ' + equalWidth + 'px; left: ' + left + 'px; }';
+              ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + i + ' { width: ' + equalWidth + 'px; }';
               left = left + equalWidth;
             });
 

src/js/core/directives/ui-grid.js

@@ -27,7 +27,7 @@
        * @description Creates a new grid instance. Each instance will have a unique id
        * @returns {Grid} grid
        */
-      createGrid : function(){
+      createGrid : function() {
         var grid = new Grid(gridUtil.newId());
         grid.registerColumnBuilder(service.defaultColumnBuilder);
         return grid;
@@ -280,7 +280,9 @@
     // NOTE: viewport drawable height is the height of the grid minus the header row height (including any border)
     // TODO(c0bra): account for footer height
     Grid.prototype.getViewportHeight = function () {
-      return this.gridHeight - this.headerHeight;
+      var viewPortHeight = this.gridHeight - this.headerHeight;
+      $log.debug('viewPortHeight', viewPortHeight);
+      return viewPortHeight;
     };
 
     Grid.prototype.getCanvasHeight = function () {
@@ -478,6 +480,7 @@
       $scope.grid.refreshCanvas = self.refreshCanvas = function() {
         if (self.header) {
           self.grid.headerHeight = gridUtil.outerElementHeight(self.header);
+          $log.debug('self.grid.headerHeight', self.grid.headerHeight);
         }
 
         self.grid.buildStyles($scope);
@@ -537,7 +540,7 @@ module.directive('uiGrid',
             post: function ($scope, $elm, $attrs, uiGridCtrl) {
               $log.debug('ui-grid postlink');
 
-              uiGridCtrl.grid.gridWidth = $scope.gridWidth = $elm[0].clientWidth;
+              uiGridCtrl.grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm);
               uiGridCtrl.grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm);
 
               uiGridCtrl.refreshCanvas();
@@ -557,7 +560,7 @@ module.directive('uiGrid',
 
         return {
           pre: function($scope, iElement) {
-            $log.debug('uiGridCell pre-link');
+            // $log.debug('uiGridCell pre-link');
             var html = $scope.col.cellTemplate.replace(uiGridConstants.COL_FIELD, 'row.entity.' + $scope.col.colDef.field);
 
 //            if ($scope.col.enableCellEdit) {
@@ -578,7 +581,7 @@ module.directive('uiGrid',
             iElement.append(cellElement);
           },
           post: function($scope, iElement) {
-            $log.debug('uiGridCell post-link');
+            // $log.debug('uiGridCell post-link');
 //            if ($scope.enableCellSelection) {
 //              $scope.domAccessProvider.selectionHandlers($scope, iElement);
 //            }

src/js/core/services/ui-grid-util.js

@@ -6,7 +6,11 @@ function getStyles (elem) {
   return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
 }
 
-var rnumnonpx = new RegExp( "^(" + (/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/).source + ")(?!px)[a-z%]+$", "i" );
+var rnumnonpx = new RegExp( "^(" + (/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/).source + ")(?!px)[a-z%]+$", "i" ),
+    // swappable if display is none or starts with table except "table", "table-cell", or "table-caption"
+    // see here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
+    rdisplayswap = /^(block|none|table(?!-c[ea]).+)/,
+    cssShow = { position: "absolute", visibility: "hidden", display: "block" };
 
 function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
   var i = extra === ( isBorderBox ? 'border' : 'content' ) ?
@@ -307,6 +311,41 @@ module.service('gridUtil', ['$window', '$document', '$http', '$templateCache', f
 
     },
 
+    swap: function( elem, options, callback, args ) {
+      var ret, name,
+              old = {};
+
+      // Remember the old values, and insert the new ones
+      for ( name in options ) {
+        old[ name ] = elem.style[ name ];
+        elem.style[ name ] = options[ name ];
+      }
+
+      ret = callback.apply( elem, args || [] );
+
+      // Revert the old values
+      for ( name in options ) {
+        elem.style[ name ] = old[ name ];
+      }
+
+      return ret;
+    },
+
+    fakeElement: function( elem, options, callback, args ) {
+      var ret, name,
+          newElement = angular.element(elem).clone()[0];
+
+      for ( name in options ) {
+        newElement.style[ name ] = options[ name ];
+      }
+
+      angular.element(document.body).append(newElement);
+
+      ret = callback.call( newElement, newElement );
+
+      return ret;
+    },
+
     /**
     * @ngdoc method
     * @name normalizeWheelEvent
@@ -413,8 +452,19 @@ module.service('gridUtil', ['$window', '$document', '$http', '$templateCache', f
       if (typeof(e.length) !== 'undefined' && e.length) {
         e = elem[0];
       }
-      
-      return elem ? getWidthOrHeight( e, name, extra ) : null;
+
+      if (e) {
+        // debugger;
+        var styles = getStyles(e);
+        return e.offsetWidth === 0 && rdisplayswap.test(styles.display) ?
+                  s.fakeElement(e, cssShow, function(newElm) {
+                    return getWidthOrHeight( newElm, name, extra );
+                  }) :
+                  getWidthOrHeight( e, name, extra );
+      }
+      else {
+        return null;
+      }
     };
 
     s['outerElement' + capsName] = function (elem, margin) {

src/less/cell.less

@@ -1,8 +1,8 @@
 .ui-grid-cell {
   overflow: hidden;
-  position: absolute;
-//  top: 0;
-//  bottom: 0;
+  // position: absolute;
+  position: relative;
+  float: left;
   background-color: inherit;
 }
 

src/less/header.less

@@ -8,10 +8,21 @@
     font-weight: bold;
 
     .gradient(#f3f3f3, #eee, #fff);
+
+  // &:before, &:after {
+  //   content:"";
+  //   display:table;
+  // }
+
+  // &:after {
+  //   clear:both;
+  // }
 }
 
 .ui-grid-header-cell {
-  position: absolute;
+  // position: absolute;
+  position: relative;
+  float: left;
   top: 0;
   bottom: 0;
   background-color: inherit;

test/unit/services/ui-grid-util.spec.js

@@ -113,6 +113,23 @@ describe('ui.grid.util', function() {
 
         expect(w).toEqual(300);
       });
+
+      it('should work with hidden element', function() {
+        angular.element(elm).remove();
+
+        elm = document.createElement('div');
+        elm.style.height = "300px";
+        elm.style.width = "200px";
+        elm.style.display = "none";
+        document.body.appendChild(elm);
+
+        angular.element(elm).append('<div id="testelm" style="display: none">Test Test Test</div>');
+
+        var testelm = document.getElementById('testelm');
+        var h = gridUtil.elementHeight(testelm);
+
+        expect(h).toBeGreaterThan(0);
+      });
     });
 
     describe('elementWidth()', function () {