diff --git a/src/js/core/directives/ui-grid-header-cell.js b/src/js/core/directives/ui-grid-header-cell.js index 8b8f02ad4f..c6018a1efc 100644 --- a/src/js/core/directives/ui-grid-header-cell.js +++ b/src/js/core/directives/ui-grid-header-cell.js @@ -13,17 +13,24 @@ row: '=', renderIndex: '=' }, - require: '?^uiGrid', + require: ['?^uiGrid', '^uiGridRenderContainer'], replace: true, compile: function() { return { - pre: function ($scope, $elm, $attrs, uiGridCtrl) { + pre: function ($scope, $elm, $attrs) { var cellHeader = $compile($scope.col.headerCellTemplate)($scope); $elm.append(cellHeader); }, - post: function ($scope, $elm, $attrs, uiGridCtrl) { + post: function ($scope, $elm, $attrs, controllers) { + var uiGridCtrl = controllers[0]; + var renderContainerCtrl = controllers[1]; + $scope.grid = uiGridCtrl.grid; + + $log.debug('id', renderContainerCtrl.containerId); + + $scope.renderContainer = uiGridCtrl.grid.renderContainers[renderContainerCtrl.containerId]; $elm.addClass($scope.col.getColClass(false)); diff --git a/src/js/core/directives/ui-grid-header.js b/src/js/core/directives/ui-grid-header.js index 8e93f646d3..782a1a9620 100644 --- a/src/js/core/directives/ui-grid-header.js +++ b/src/js/core/directives/ui-grid-header.js @@ -44,7 +44,14 @@ var template = angular.element(contents); var newElm = $compile(template)($scope); - $elm.append(newElm); + $elm.replaceWith(newElm); + + // Replace the reference to the container's header element with this new element + containerCtrl.header = newElm; + containerCtrl.colContainer.header = newElm; + + // And update $elm to be the new element + $elm = newElm; if (containerCtrl) { // Inject a reference to the header viewport (if it exists) into the grid controller for use in the horizontal scroll handler below diff --git a/src/js/core/directives/ui-grid-render-container.js b/src/js/core/directives/ui-grid-render-container.js index f1ec009116..0628fcd573 100644 --- a/src/js/core/directives/ui-grid-render-container.js +++ b/src/js/core/directives/ui-grid-render-container.js @@ -61,6 +61,8 @@ var rowContainer = containerCtrl.rowContainer; var colContainer = containerCtrl.colContainer; + var renderContainer = grid.renderContainers[$scope.containerId]; + // Put the container name on this element as a class $elm.addClass('ui-grid-render-container-' + $scope.containerId); @@ -358,7 +360,15 @@ ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-canvas { width: ' + canvasWidth + 'px; }'; ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }'; - // Update + + // 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.explicitHeaderHeight !== undefined && renderContainer.explicitHeaderHeight !== null && renderContainer.explicitHeaderHeight > 0) { + ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { height: ' + renderContainer.explicitHeaderHeight + '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.innerHeaderHeight !== undefined && renderContainer.innerHeaderHeight !== null && renderContainer.innerHeaderHeight > 0) { + ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { height: ' + renderContainer.innerHeaderHeight + 'px; }'; + } return ret; } diff --git a/src/js/core/factories/Grid.js b/src/js/core/factories/Grid.js index 867c44fef6..20cb959e48 100644 --- a/src/js/core/factories/Grid.js +++ b/src/js/core/factories/Grid.js @@ -1512,17 +1512,42 @@ angular.module('ui.grid') var rebuildStyles = false; // Get all the header heights - for (var i = 0; i < containerHeadersToRecalc.length; i++) { - var container = containerHeadersToRecalc[i]; + var maxHeight = 0; + var i, container; + for (i = 0; i < containerHeadersToRecalc.length; i++) { + container = containerHeadersToRecalc[i]; if (container.header) { var oldHeaderHeight = container.headerHeight; var headerHeight = gridUtil.outerElementHeight(container.header); + container.headerHeight = headerHeight; if (oldHeaderHeight !== headerHeight) { rebuildStyles = true; } + + // Get the "inner" header height, that is the height minus the top and bottom borders, if present. We'll use it to make sure all the headers have a consistent height + var topBorder = gridUtil.getBorderSize(container.header, 'top'); + var bottomBorder = gridUtil.getBorderSize(container.header, 'bottom'); + var innerHeaderHeight = headerHeight - topBorder - bottomBorder; + + container.innerHeaderHeight = innerHeaderHeight; + + // Save the largest header height for use later + if (innerHeaderHeight > maxHeight) { + maxHeight = innerHeaderHeight; + } + } + } + + // Go through all the headers + for (i = 0; i < containerHeadersToRecalc.length; i++) { + container = containerHeadersToRecalc[i]; + + // If this header's height is less than another header's height, then explicitly set it so they're the same and one isn't all offset and weird looking + if (container.headerHeight < maxHeight) { + container.explicitHeaderHeight = maxHeight; } } diff --git a/src/js/core/services/ui-grid-util.js b/src/js/core/services/ui-grid-util.js index 749b5f9a2c..2723bb701d 100644 --- a/src/js/core/services/ui-grid-util.js +++ b/src/js/core/services/ui-grid-util.js @@ -748,8 +748,9 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC var styles = getStyles(elem); + // If a specific border is supplied, like 'top', read the 'borderTop' style property if (borderType) { - borderType = 'border-' + borderType; + borderType = 'border' + borderType.charAt(0).toUpperCase() + borderType.slice(1); } else { borderType = 'border'; diff --git a/src/less/header.less b/src/less/header.less index b0f5d8c389..1b1b965f58 100644 --- a/src/less/header.less +++ b/src/less/header.less @@ -4,11 +4,14 @@ } @topPanelRadius: @gridBorderRadius - @gridBorderWidth; + +.ui-grid-header { + border-bottom: 1px solid @borderColor; +} + .ui-grid-top-panel { position: relative; - // z-index: 1; - // background-color: @darkGray; // #EAEAEA - border-bottom: 1px solid @borderColor; // #D4D4D4 + // border-bottom: 1px solid @borderColor; // #D4D4D4 overflow: hidden; // Disable so menus show up font-weight: bold; diff --git a/src/templates/ui-grid/ui-grid-header.html b/src/templates/ui-grid/ui-grid-header.html index 1ce816e7a4..73c0f27eb3 100644 --- a/src/templates/ui-grid/ui-grid-header.html +++ b/src/templates/ui-grid/ui-grid-header.html @@ -1,10 +1,12 @@ -
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file diff --git a/src/templates/ui-grid/uiGridHeaderCell.html b/src/templates/ui-grid/uiGridHeaderCell.html index 8b4bde2c04..3a402172f7 100644 --- a/src/templates/ui-grid/uiGridHeaderCell.html +++ b/src/templates/ui-grid/uiGridHeaderCell.html @@ -1,4 +1,4 @@ -
+
 
{{ col.displayName CUSTOM_FILTERS }} @@ -9,7 +9,7 @@
-   +  
diff --git a/src/templates/ui-grid/uiGridViewport.html b/src/templates/ui-grid/uiGridViewport.html index 2ba4804dcb..a39e2be475 100644 --- a/src/templates/ui-grid/uiGridViewport.html +++ b/src/templates/ui-grid/uiGridViewport.html @@ -1,6 +1,6 @@
-
+