fix(uiGridHeader): Fix header height calculation

When the header cells were long enough that they wrapped inside the header
container, they were causing the header height to be calcuated as double
what it should have been.

This has been fixed by making the header cells floating, and defaulting
their width to 0. Their width is calculated dynamically within
uiGridStyle.

Author: c0bra

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

@@ -156,10 +156,10 @@
         }
         var col = self.getColumn(colDef.field);
 
-        if (!col) {
+        //if (!col) {
           col = new GridColumn(colDef, index);
           self.columns.push(col);
-        }
+        //}
 
         self.columnBuilders.forEach(function (builder) {
           builderPromises.push(builder.call(self, colDef, col, self.options));
@@ -259,7 +259,7 @@
       for (var i = 0; i < newRows.length; i++) {
         this.renderedRows.length = newRows.length;
 
-        this.renderedRows[i] =newRows[i];
+        this.renderedRows[i] = newRows[i];
       }
     };
 
@@ -284,7 +284,6 @@
     // TODO(c0bra): account for footer height
     Grid.prototype.getViewportHeight = function () {
       var viewPortHeight = this.gridHeight - this.headerHeight;
-      $log.debug('viewPortHeight', viewPortHeight);
       return viewPortHeight;
     };
 
@@ -476,17 +475,16 @@
 
 
       $scope.$watch(function () { return self.grid.styleComputations; }, function() {
-        self.grid.buildStyles($scope);
+        self.refreshCanvas();
       });
 
       // Refresh the canvas drawable size
       $scope.grid.refreshCanvas = self.refreshCanvas = function() {
+        self.grid.buildStyles($scope);
+
         if (self.header) {
           self.grid.headerHeight = gridUtil.outerElementHeight(self.header);
-          $log.debug('self.grid.headerHeight', self.grid.headerHeight);
         }
-
-        self.grid.buildStyles($scope);
       };
 
       //todo: throttle this event?
@@ -548,6 +546,8 @@ module.directive('uiGrid',
             post: function ($scope, $elm, $attrs, uiGridCtrl) {
               $log.debug('ui-grid postlink');
 
+              uiGridCtrl.grid.element = $elm;
+
               uiGridCtrl.grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm);
               uiGridCtrl.grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm);
 
@@ -568,14 +568,14 @@ module.directive('uiGrid',
 
         return {
           pre: function($scope, $elm) {
-            $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);
             var cellElement = $compile(html)($scope);
             $elm.append(cellElement);
           },
           post: function($scope, $elm) {
-            $log.debug('uiGridCell post-link');
+            // $log.debug('uiGridCell post-link');
           }
         };
       }

src/less/header.less

@@ -7,23 +7,38 @@
     overflow: hidden;
     font-weight: bold;
 
-    .gradient(#f3f3f3, #eee, #fff);
+    .gradient(#f3f3f3, #eee, #fff);  
+}
 
-  // &:before, &:after {
-  //   content:"";
-  //   display:table;
-  // }
+.ui-grid-header {
+  // Clearfix for floating header cells
+  &:before, &:after {
+    content: "";
+    display: table;
+    line-height: 0;
+  }
 
-  // &:after {
-  //   clear:both;
-  // }
+  &:after {
+    clear:both;
+  }
 }
 
 .ui-grid-header-cell {
-  // position: absolute;
   position: relative;
   float: left;
   top: 0;
   bottom: 0;
   background-color: inherit;
+
+  // Default to width 0 so header height can calculate right. Otherwise
+  //  the header cells will flow onto the next line of the header container
+  //  and cause the header height to be calculated as twice the height
+  //  it should be. The column widths are calculated dynamically
+  width: 0;
+}
+
+// Make vertical bar in header row fill the height of the cell completely
+.ui-grid-header .ui-grid-vertical-bar {
+  top: 0;
+  bottom: 0;
 }

src/templates/ui-grid/ui-grid-header.html

@@ -1,8 +1,7 @@
 <div class="ui-grid-top-panel">
   <div class="ui-grid-header">
-    <div ng-repeat="col in grid.columns" class="ui-grid-header-cell col{{ $index }}"> <!-- ng-style="{ height: col.headerRowHeight }" -->
-      <div class="ui-grid-vertical-bar">&nbsp;</div> <!-- ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" -->
-      <!-- <div ng-header-cell></div> -->
+    <div ng-repeat="col in grid.columns" class="ui-grid-header-cell col{{ $index }}">
+      <div class="ui-grid-vertical-bar">&nbsp;</div>
       <div class="ui-grid-cell-contents">{{ col.displayName }}</span></div>
     </div>
   </div>

src/templates/ui-grid/ui-grid.html

@@ -13,10 +13,6 @@
       height: {{ grid.getCanvasHeight() }}px;
     }
 
-    .grid{{ grid.id }} .ui-grid-header, .grid{{ grid.id }} .ui-grid-header-cell .ui-grid-vertical-bar {
-      height: {{ grid.options.headerRowHeight }}px;
-    }
-
     .grid{{ grid.id }} .ui-grid-row, .grid{{ grid.id }} .ui-grid-cell, .grid{{ grid.id }} .ui-grid-cell .ui-grid-vertical-bar {
       height: {{ grid.options.rowHeight }}px;
     }