Skip to content

Commit cfc2444

Browse files
c0brac0bra
committed
fix(uiGridHeader): Fix height calculations
Header heights were wrong in the "row header", as well as kinda weird when multiple filters were on one column and another only had one: the border on the second one would be too short. This change adds handling for updating the headers' heights to keep them consistent. Any header cell shorter than the largest header gets explicitly set to the right height. Alternatively every header cell will get set to the "inner" height of its header so a shorter header cell will still have the right border size as a larger one. Fixes #1639, fixes #1613
1 parent c4ecd01 commit cfc2444

File tree

9 files changed

+76
-21
lines changed

9 files changed

+76
-21
lines changed

‎src/js/core/directives/ui-grid-header-cell.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,24 @@
1313
row: '=',
1414
renderIndex: '='
1515
},
16-
require: '?^uiGrid',
16+
require: ['?^uiGrid', '^uiGridRenderContainer'],
1717
replace: true,
1818
compile: function() {
1919
return {
20-
pre: function ($scope, $elm, $attrs, uiGridCtrl) {
20+
pre: function ($scope, $elm, $attrs) {
2121
var cellHeader = $compile($scope.col.headerCellTemplate)($scope);
2222
$elm.append(cellHeader);
2323
},
2424

25-
post: function ($scope, $elm, $attrs, uiGridCtrl) {
25+
post: function ($scope, $elm, $attrs, controllers) {
26+
var uiGridCtrl = controllers[0];
27+
var renderContainerCtrl = controllers[1];
28+
2629
$scope.grid = uiGridCtrl.grid;
30+
31+
$log.debug('id', renderContainerCtrl.containerId);
32+
33+
$scope.renderContainer = uiGridCtrl.grid.renderContainers[renderContainerCtrl.containerId];
2734

2835
$elm.addClass($scope.col.getColClass(false));
2936

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,14 @@
4444
var template = angular.element(contents);
4545

4646
var newElm = $compile(template)($scope);
47-
$elm.append(newElm);
47+
$elm.replaceWith(newElm);
48+
49+
// Replace the reference to the container's header element with this new element
50+
containerCtrl.header = newElm;
51+
containerCtrl.colContainer.header = newElm;
52+
53+
// And update $elm to be the new element
54+
$elm = newElm;
4855

4956
if (containerCtrl) {
5057
// Inject a reference to the header viewport (if it exists) into the grid controller for use in the horizontal scroll handler below

‎src/js/core/directives/ui-grid-render-container.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161
var rowContainer = containerCtrl.rowContainer;
6262
var colContainer = containerCtrl.colContainer;
6363

64+
var renderContainer = grid.renderContainers[$scope.containerId];
65+
6466
// Put the container name on this element as a class
6567
$elm.addClass('ui-grid-render-container-' + $scope.containerId);
6668

@@ -358,7 +360,15 @@
358360

359361
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-canvas { width: ' + canvasWidth + 'px; }';
360362
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
361-
// Update
363+
364+
// 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)
365+
if (renderContainer.explicitHeaderHeight !== undefined && renderContainer.explicitHeaderHeight !== null && renderContainer.explicitHeaderHeight > 0) {
366+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { height: ' + renderContainer.explicitHeaderHeight + 'px; }';
367+
}
368+
// 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)
369+
else if (renderContainer.innerHeaderHeight !== undefined && renderContainer.innerHeaderHeight !== null && renderContainer.innerHeaderHeight > 0) {
370+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { height: ' + renderContainer.innerHeaderHeight + 'px; }';
371+
}
362372

363373
return ret;
364374
}

‎src/js/core/factories/Grid.js

+27-2
Original file line numberDiff line numberDiff line change
@@ -1512,17 +1512,42 @@ angular.module('ui.grid')
15121512
var rebuildStyles = false;
15131513

15141514
// Get all the header heights
1515-
for (var i = 0; i < containerHeadersToRecalc.length; i++) {
1516-
var container = containerHeadersToRecalc[i];
1515+
var maxHeight = 0;
1516+
var i, container;
1517+
for (i = 0; i < containerHeadersToRecalc.length; i++) {
1518+
container = containerHeadersToRecalc[i];
15171519

15181520
if (container.header) {
15191521
var oldHeaderHeight = container.headerHeight;
15201522
var headerHeight = gridUtil.outerElementHeight(container.header);
1523+
15211524
container.headerHeight = headerHeight;
15221525

15231526
if (oldHeaderHeight !== headerHeight) {
15241527
rebuildStyles = true;
15251528
}
1529+
1530+
// 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
1531+
var topBorder = gridUtil.getBorderSize(container.header, 'top');
1532+
var bottomBorder = gridUtil.getBorderSize(container.header, 'bottom');
1533+
var innerHeaderHeight = headerHeight - topBorder - bottomBorder;
1534+
1535+
container.innerHeaderHeight = innerHeaderHeight;
1536+
1537+
// Save the largest header height for use later
1538+
if (innerHeaderHeight > maxHeight) {
1539+
maxHeight = innerHeaderHeight;
1540+
}
1541+
}
1542+
}
1543+
1544+
// Go through all the headers
1545+
for (i = 0; i < containerHeadersToRecalc.length; i++) {
1546+
container = containerHeadersToRecalc[i];
1547+
1548+
// 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
1549+
if (container.headerHeight < maxHeight) {
1550+
container.explicitHeaderHeight = maxHeight;
15261551
}
15271552
}
15281553

‎src/js/core/services/ui-grid-util.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -748,8 +748,9 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC
748748

749749
var styles = getStyles(elem);
750750

751+
// If a specific border is supplied, like 'top', read the 'borderTop' style property
751752
if (borderType) {
752-
borderType = 'border-' + borderType;
753+
borderType = 'border' + borderType.charAt(0).toUpperCase() + borderType.slice(1);
753754
}
754755
else {
755756
borderType = 'border';

‎src/less/header.less

+6-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@
44
}
55

66
@topPanelRadius: @gridBorderRadius - @gridBorderWidth;
7+
8+
.ui-grid-header {
9+
border-bottom: 1px solid @borderColor;
10+
}
11+
712
.ui-grid-top-panel {
813
position: relative;
9-
// z-index: 1;
10-
// background-color: @darkGray; // #EAEAEA
11-
border-bottom: 1px solid @borderColor; // #D4D4D4
14+
// border-bottom: 1px solid @borderColor; // #D4D4D4
1215

1316
overflow: hidden; // Disable so menus show up
1417
font-weight: bold;

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

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
<div class="ui-grid-top-panel">
2-
<div ui-grid-group-panel ng-show="grid.options.showGroupPanel"></div>
3-
<div class="ui-grid-header ui-grid-header-viewport">
4-
<div class="ui-grid-header-canvas">
5-
<div class="ui-grid-header-cell 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)">
6-
</div>
1+
<div class="ui-grid-header">
2+
<div class="ui-grid-top-panel">
3+
<div ui-grid-group-panel ng-show="grid.options.showGroupPanel"></div>
4+
<div class="ui-grid-header-viewport">
5+
<div class="ui-grid-header-canvas">
6+
<div class="ui-grid-header-cell 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)">
7+
</div>
8+
</div>
79
</div>
10+
<div ui-grid-menu></div>
811
</div>
9-
<div ui-grid-menu></div>
1012
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-class="{ 'sortable': sortable }">
1+
<div ng-class="{ 'sortable': sortable }" ng-style="{ 'height': renderContainer.explicitHeaderHeight + 'px' }">
22
<div class="ui-grid-vertical-bar">&nbsp;</div>
33
<div class="ui-grid-cell-contents" col-index="renderIndex">
44
{{ col.displayName CUSTOM_FILTERS }}
@@ -9,7 +9,7 @@
99
</div>
1010

1111
<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenu && !col.isRowHeader && !col.colDef.disableColumnMenu" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">
12-
<i class="ui-grid-icon-angle-down">&nbsp;<i>
12+
<i class="ui-grid-icon-angle-down">&nbsp;</i>
1313
</div>
1414

1515
<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="ui-grid-viewport">
22
<div class="ui-grid-canvas">
3-
<div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by row.uid" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
3+
<div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
44
<div ui-grid-row="row" row-render-index="rowRenderIndex"></div>
55
</div>
66
</div>

0 commit comments

Comments
 (0)