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.
angular-ui · Jan 15, 2014 · b156285 · b156285
1 parent 8670fdc
commit b156285
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 26 deletions.
diff --git 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
@@ -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;
 }
diff --git 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
@@ -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;
     }