Skip to content

Commit 893bb13

Browse files
c0brac0bra
committed
fix(uiGridHeader): Fix dynamic header heights
Previously header cell heights were calculated based on a "max height is king" algorithm where cells could grow to match the largest height, but could never shrink, e.g. this let cells with no filter box be the same height as those with no filter box. This presented a problem with toggling features like filtering. If suddenly no columns were filterable this would leave a big empty space at the bottom of each header cell. This change makes header cells display-type "table-cell", which lets them render like a TD with full height, and places them in table-row and table divs. Replacing "width" with "min-width" and "max-width" forces the header cells to be the correct width. Also the `columnStyle` method has been replaced with a `columnWrapperStyle` method.
1 parent 78a4b43 commit 893bb13

File tree

8 files changed

+47
-77
lines changed

8 files changed

+47
-77
lines changed

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

+7-62
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
var newScrollLeft = args.getNewScrollLeft(colContainer,containerCtrl.viewport);
101101

102102
// Make the current horizontal scroll position available in the $scope
103-
$scope.newScrollLeft = newScrollLeft;
103+
$scope.newScrollLeft = newScrollLeft;
104104

105105
if (containerCtrl.headerViewport) {
106106
containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.headerViewport, newScrollLeft);
@@ -110,7 +110,7 @@
110110
containerCtrl.footerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.footerViewport, newScrollLeft);
111111
}
112112

113-
//scroll came from somewhere else, so the viewport must be positioned
113+
// Scroll came from somewhere else, so the viewport must be positioned
114114
if (args.source !== ScrollEvent.Sources.ViewPortScroll) {
115115
containerCtrl.viewport[0].scrollLeft = newScrollLeft;
116116
}
@@ -189,22 +189,17 @@
189189
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
190190

191191
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
192+
193+
if (renderContainer.explicitHeaderCanvasHeight) {
194+
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
195+
}
192196

193197
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
194198
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
195199

196200
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-canvas { width: ' + canvasWidth + grid.scrollbarWidth + 'px; }';
197201
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
198202

199-
// 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)
200-
if (renderContainer.explicitHeaderCanvasHeight !== undefined && renderContainer.explicitHeaderCanvasHeight !== null && renderContainer.explicitHeaderCanvasHeight > 0) {
201-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { min-height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
202-
}
203-
// 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)
204-
else if (renderContainer.headerCanvasHeight !== undefined && renderContainer.headerCanvasHeight !== null && renderContainer.headerCanvasHeight > 0) {
205-
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-cell { min-height: ' + renderContainer.headerCanvasHeight + 'px; }';
206-
}
207-
208203
return ret;
209204
}
210205

@@ -220,57 +215,7 @@
220215
}]);
221216

222217
module.controller('uiGridRenderContainer', ['$scope', 'gridUtil', function ($scope, gridUtil) {
223-
var self = this;
224-
225-
self.rowStyle = function (index) {
226-
var renderContainer = $scope.grid.renderContainers[$scope.containerId];
227-
228-
var styles = {};
229-
230-
if (!renderContainer.disableRowOffset) {
231-
if (index === 0 && self.currentTopRow !== 0) {
232-
// The row offset-top is just the height of the rows above the current top-most row, which are no longer rendered
233-
var hiddenRowWidth = ($scope.rowContainer.currentTopRow) *
234-
$scope.rowContainer.visibleRowCache[$scope.rowContainer.currentTopRow].height;
235-
236-
// return { 'margin-top': hiddenRowWidth + 'px' };
237-
//gridUtil.logDebug('margin-top ' + hiddenRowWidth );
238-
styles['margin-top'] = hiddenRowWidth + 'px';
239-
}
240-
}
241-
242-
if (!renderContainer.disableColumnOffset && $scope.colContainer.currentFirstColumn !== 0) {
243-
if ($scope.grid.isRTL()) {
244-
styles['margin-right'] = $scope.colContainer.columnOffset + 'px';
245-
}
246-
else {
247-
styles['margin-left'] = $scope.colContainer.columnOffset + 'px';
248-
}
249-
}
250-
251-
return styles;
252-
};
253-
254-
self.columnStyle = function (index) {
255-
var renderContainer = $scope.grid.renderContainers[$scope.containerId];
256-
257-
var self = this;
258-
259-
if (!renderContainer.disableColumnOffset) {
260-
if (index === 0 && $scope.colContainer.currentFirstColumn !== 0) {
261-
var offset = $scope.colContainer.columnOffset;
262-
263-
if ($scope.grid.isRTL()) {
264-
return { 'margin-right': offset + 'px' };
265-
}
266-
else {
267-
return { 'margin-left': offset + 'px' };
268-
}
269-
}
270-
}
271-
272-
return null;
273-
};
218+
274219
}]);
275220

276221
})();

‎src/js/core/factories/GridColumn.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -585,7 +585,7 @@ angular.module('ui.grid')
585585
* @description Returns the class definition for th column
586586
*/
587587
GridColumn.prototype.getColClassDefinition = function () {
588-
return ' .grid' + this.grid.id + ' ' + this.getColClass(true) + ' { width: ' + this.drawnWidth + 'px; }';
588+
return ' .grid' + this.grid.id + ' ' + this.getColClass(true) + ' { min-width: ' + this.drawnWidth + 'px; max-width: ' + this.drawnWidth + 'px; }';
589589
};
590590

591591
/**

‎src/js/core/factories/GridRenderContainer.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -518,10 +518,10 @@ angular.module('ui.grid')
518518
return styles;
519519
};
520520

521-
GridRenderContainer.prototype.columnStyle = function (index) {
521+
GridRenderContainer.prototype.headerCellWrapperStyle = function () {
522522
var self = this;
523523

524-
if (index === 0 && self.currentFirstColumn !== 0) {
524+
if (self.currentFirstColumn !== 0) {
525525
var offset = self.columnOffset;
526526

527527
if (self.grid.isRTL()) {

‎src/less/footer.less

+12-2
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,25 @@
4545
// .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
4646
}
4747

48+
.ui-grid-footer-cell-wrapper {
49+
position: relative;
50+
display: table;
51+
box-sizing: border-box;
52+
height: 100%;
53+
}
54+
55+
.ui-grid-footer-cell-row {
56+
display: table-row;
57+
}
58+
4859
.ui-grid-footer-cell {
4960
overflow: hidden;
50-
// position: absolute;
5161
// position: relative; // NOTE: removing so border is visible
52-
float: left;
5362
background-color: inherit;
5463
border-right: @gridBorderWidth solid;
5564
border-color: @borderColor;
5665
box-sizing: border-box;
66+
display: table-cell;
5767

5868
&:last-child {
5969
border-right: 0;

‎src/less/header.less

+12-4
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
}
3030

3131
.ui-grid-header-canvas {
32-
position: relative;
3332

3433
// Clearfix for floating header cells
3534
&:before, &:after {
@@ -45,15 +44,24 @@
4544
// .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
4645
}
4746

47+
.ui-grid-header-cell-wrapper {
48+
position: relative;
49+
display: table;
50+
box-sizing: border-box;
51+
height: 100%;
52+
}
53+
54+
.ui-grid-header-cell-row {
55+
display: table-row;
56+
}
57+
4858
.ui-grid-header-cell {
4959
position: relative;
5060
box-sizing: border-box;
51-
float: left;
52-
top: 0;
53-
bottom: 0;
5461
background-color: inherit;
5562
border-right: @gridBorderWidth solid;
5663
border-color: @headerVerticalBarColor;
64+
display: table-cell;
5765

5866
&:last-child {
5967
border-right: 0;

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<div class="ui-grid-footer-panel ui-grid-footer-aggregates-row">
2-
<div class="ui-grid-footer ui-grid-footer-viewport">
3-
<div class="ui-grid-footer-canvas">
4-
<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>
2+
<div class="ui-grid-footer ui-grid-footer-viewport">
3+
<div class="ui-grid-footer-canvas">
4+
<div class="ui-grid-footer-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
5+
<div class="ui-grid-footer-cell-row">
6+
<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>
57
</div>
8+
</div>
69
</div>
10+
</div>
711
</div>

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
<div class="ui-grid-top-panel">
33
<div class="ui-grid-header-viewport">
44
<div class="ui-grid-header-canvas">
5-
<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)">
5+
<div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
6+
<div class="ui-grid-header-cell-row">
7+
<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>
68
</div>
9+
</div>
710
</div>
811

912
</div>

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

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

0 commit comments

Comments
 (0)