From b1562854c808814695ab436b2ba63cd1afa28d4d Mon Sep 17 00:00:00 2001
From: Brian Hann <emailc0bra@gmail.com>
Date: Wed, 15 Jan 2014 13:37:23 -0600
Subject: [PATCH] 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.
---
 src/js/core/directives/ui-grid.js         | 20 +++++++-------
 src/less/header.less                      | 33 ++++++++++++++++-------
 src/templates/ui-grid/ui-grid-header.html |  5 ++--
 src/templates/ui-grid/ui-grid.html        |  4 ---
 4 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/js/core/directives/ui-grid.js b/src/js/core/directives/ui-grid.js
index a8da27123e..bc9e666c70 100644
--- a/src/js/core/directives/ui-grid.js
+++ b/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');
           }
         };
       }
diff --git a/src/less/header.less b/src/less/header.less
index 407e4d0dd1..c4f733ef5b 100644
--- a/src/less/header.less
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/templates/ui-grid/ui-grid-header.html b/src/templates/ui-grid/ui-grid-header.html
index 3cee0aaee0..e6136753b7 100644
--- a/src/templates/ui-grid/ui-grid-header.html
+++ b/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>
diff --git a/src/templates/ui-grid/ui-grid.html b/src/templates/ui-grid/ui-grid.html
index 3b20bff18d..7972f9c84a 100644
--- a/src/templates/ui-grid/ui-grid.html
+++ b/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;
     }