Merge pull request #2800 from angular-ui/fix-dynamic-header-heights

Fix dynamic header heights
angular-ui · Feb 18, 2015 · e7bd6f2 · e7bd6f2
2 parents 0fc6b21 + 893bb13
commit e7bd6f2
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 77 deletions.
diff --git a/src/js/core/directives/ui-grid-render-container.js b/src/js/core/directives/ui-grid-render-container.js
@@ -100,7 +100,7 @@
                 var newScrollLeft = args.getNewScrollLeft(colContainer,containerCtrl.viewport);
 
                 // Make the current horizontal scroll position available in the $scope
-                $scope.newScrollLeft = newScrollLeft;                
+                $scope.newScrollLeft = newScrollLeft;
 
                 if (containerCtrl.headerViewport) {
                   containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.headerViewport, newScrollLeft);
@@ -110,7 +110,7 @@
                   containerCtrl.footerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.footerViewport, newScrollLeft);
                 }
 
-                //scroll came from somewhere else, so the viewport must be positioned
+                // Scroll came from somewhere else, so the viewport must be positioned
                 if (args.source !== ScrollEvent.Sources.ViewPortScroll) {
                   containerCtrl.viewport[0].scrollLeft = newScrollLeft;
                 }
@@ -189,22 +189,17 @@
               ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
 
               ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
+
+              if (renderContainer.explicitHeaderCanvasHeight) {
+                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
+              }
 
               ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
               ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
 
               ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-canvas { width: ' + canvasWidth + grid.scrollbarWidth + 'px; }';
               ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
 
-              // If the render container has an "explicit" header height (such as in the case that its header is smaller than the other headers and needs to be explicitly set to be the same, ue thae)
-              if (renderContainer.explicitHeaderCanvasHeight !== undefined && renderContainer.explicitHeaderCanvasHeight !== null && renderContainer.explicitHeaderCanvasHeight > 0) {
-                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { min-height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
-              }
-              // Otherwise if the render container has an INNER header height, use that on the header cells (so that all the header cells are the same height and those that have less elements don't have undersized borders)
-              else if (renderContainer.headerCanvasHeight !== undefined && renderContainer.headerCanvasHeight !== null && renderContainer.headerCanvasHeight > 0) {
-                ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { min-height: ' + renderContainer.headerCanvasHeight + 'px; }';
-              }
-
               return ret;
             }
 
@@ -220,57 +215,7 @@
   }]);
 
   module.controller('uiGridRenderContainer', ['$scope', 'gridUtil', function ($scope, gridUtil) {
-    var self = this;
-
-    self.rowStyle = function (index) {
-      var renderContainer = $scope.grid.renderContainers[$scope.containerId];
-
-      var styles = {};
-
-      if (!renderContainer.disableRowOffset) {
-        if (index === 0 && self.currentTopRow !== 0) {
-          // The row offset-top is just the height of the rows above the current top-most row, which are no longer rendered
-          var hiddenRowWidth = ($scope.rowContainer.currentTopRow) *
-            $scope.rowContainer.visibleRowCache[$scope.rowContainer.currentTopRow].height;
-
-          // return { 'margin-top': hiddenRowWidth + 'px' };
-          //gridUtil.logDebug('margin-top ' + hiddenRowWidth );
-          styles['margin-top'] = hiddenRowWidth + 'px';
-        }
-      }
-
-      if (!renderContainer.disableColumnOffset && $scope.colContainer.currentFirstColumn !== 0) {
-        if ($scope.grid.isRTL()) {
-          styles['margin-right'] = $scope.colContainer.columnOffset + 'px';
-        }
-        else {
-          styles['margin-left'] = $scope.colContainer.columnOffset + 'px';
-        }
-      }
-
-      return styles;
-    };
-
-    self.columnStyle = function (index) {
-      var renderContainer = $scope.grid.renderContainers[$scope.containerId];
-
-      var self = this;
-
-      if (!renderContainer.disableColumnOffset) {
-        if (index === 0 && $scope.colContainer.currentFirstColumn !== 0) {
-          var offset = $scope.colContainer.columnOffset;
-
-          if ($scope.grid.isRTL()) {
-            return { 'margin-right': offset + 'px' };
-          }
-          else {
-            return { 'margin-left': offset + 'px' }; 
-          }
-        }
-      }
-
-      return null;
-    };
+
   }]);
 
 })();
diff --git a/src/js/core/factories/GridColumn.js b/src/js/core/factories/GridColumn.js
@@ -585,7 +585,7 @@ angular.module('ui.grid')
    * @description Returns the class definition for th column
    */
   GridColumn.prototype.getColClassDefinition = function () {
-    return ' .grid' + this.grid.id + ' ' + this.getColClass(true) + ' { width: ' + this.drawnWidth + 'px; }';
+    return ' .grid' + this.grid.id + ' ' + this.getColClass(true) + ' { min-width: ' + this.drawnWidth + 'px; max-width: ' + this.drawnWidth + 'px; }';
   };
 
   /**

diff --git a/src/js/core/factories/GridRenderContainer.js b/src/js/core/factories/GridRenderContainer.js
@@ -518,10 +518,10 @@ angular.module('ui.grid')
     return styles;
   };
 
-  GridRenderContainer.prototype.columnStyle = function (index) {
+  GridRenderContainer.prototype.headerCellWrapperStyle = function () {
     var self = this;
 
-    if (index === 0 && self.currentFirstColumn !== 0) {
+    if (self.currentFirstColumn !== 0) {
       var offset = self.columnOffset;
 
       if (self.grid.isRTL()) {

diff --git a/src/less/footer.less b/src/less/footer.less
@@ -45,15 +45,25 @@
   // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
 }
 
+.ui-grid-footer-cell-wrapper {
+  position: relative;
+  display: table;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.ui-grid-footer-cell-row {
+  display: table-row;
+}
+
 .ui-grid-footer-cell {
   overflow: hidden;
-  // position: absolute;
   // position: relative; // NOTE: removing so border is visible
-  float: left;
   background-color: inherit;
   border-right: @gridBorderWidth solid;
   border-color: @borderColor;
   box-sizing: border-box;
+  display: table-cell;
 
   &:last-child {
     border-right: 0;

diff --git a/src/less/header.less b/src/less/header.less
@@ -29,7 +29,6 @@
 }
 
 .ui-grid-header-canvas {
-  position: relative;
 
   // Clearfix for floating header cells
   &:before, &:after {
@@ -45,15 +44,24 @@
   // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
 }
 
+.ui-grid-header-cell-wrapper {
+  position: relative;
+  display: table;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.ui-grid-header-cell-row {
+  display: table-row;
+}
+
 .ui-grid-header-cell {
   position: relative;
   box-sizing: border-box;
-  float: left;
-  top: 0;
-  bottom: 0;
   background-color: inherit;
   border-right: @gridBorderWidth solid;
   border-color: @headerVerticalBarColor;
+  display: table-cell;
 
   &:last-child {
     border-right: 0;

diff --git a/src/templates/ui-grid/ui-grid-footer.html b/src/templates/ui-grid/ui-grid-footer.html
@@ -1,7 +1,11 @@
 <div class="ui-grid-footer-panel ui-grid-footer-aggregates-row">
-    <div class="ui-grid-footer ui-grid-footer-viewport">
-        <div class="ui-grid-footer-canvas">
-            <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-footer-cell col="col" render-index="$index" class="ui-grid-footer-cell ui-grid-clearfix" ng-style="$index === 0 && colContainer.columnStyle($index)"></div>
+  <div class="ui-grid-footer ui-grid-footer-viewport">
+    <div class="ui-grid-footer-canvas">
+      <div class="ui-grid-footer-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
+        <div class="ui-grid-footer-cell-row">
+          <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-footer-cell col="col" render-index="$index" class="ui-grid-footer-cell ui-grid-clearfix"></div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/templates/ui-grid/ui-grid-header.html b/src/templates/ui-grid/ui-grid-header.html
@@ -2,8 +2,11 @@
   <div class="ui-grid-top-panel">
     <div class="ui-grid-header-viewport">
       <div class="ui-grid-header-canvas">
-          <div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell col="col" render-index="$index" ng-style="$index === 0 && colContainer.columnStyle($index)">
+        <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
+          <div class="ui-grid-header-cell-row">
+            <div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell col="col" render-index="$index"></div>
           </div>
+        </div>
       </div>
 
     </div>

diff --git a/src/templates/ui-grid/uiGridViewport.html b/src/templates/ui-grid/uiGridViewport.html
@@ -1,6 +1,6 @@
-<div class="ui-grid-viewport"  ng-style="containerCtrl.colContainer.getViewPortStyle()">
+<div class="ui-grid-viewport"  ng-style="colContainer.getViewPortStyle()">
   <div class="ui-grid-canvas">
-    <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
+    <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="rowContainer.rowStyle(rowRenderIndex)">
       <div ui-grid-row="row" row-render-index="rowRenderIndex"></div>
     </div>
   </div>