Skip to content

Commit

Permalink
fix(core): add a horizontal scrollbar placeholder when needed
Browse files Browse the repository at this point in the history
  • Loading branch information
swalters committed Jun 29, 2015
1 parent 6514709 commit 365f21f
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 21 deletions.
10 changes: 7 additions & 3 deletions src/js/core/directives/ui-grid-render-container.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,15 @@
var canvasHeight = rowContainer.getCanvasHeight();

//add additional height for scrollbar on left and right container
if ($scope.containerId !== 'body') {
canvasHeight += grid.scrollbarHeight;
}
//if ($scope.containerId !== 'body') {
// canvasHeight -= grid.scrollbarHeight;
//}

var viewportHeight = rowContainer.getViewportHeight();
//shorten the height to make room for a scrollbar placeholder
if (colContainer.needsHScrollbarPlaceholder()) {
viewportHeight -= grid.scrollbarHeight;
}

var headerViewportWidth,
footerViewportWidth;
Expand Down
4 changes: 2 additions & 2 deletions src/js/core/directives/ui-pinned-container.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@
// TODO(c0bra): Subtract sum of col widths from grid viewport width and update it
$elm.attr('style', null);

var myHeight = grid.renderContainers.body.getViewportHeight(); // + grid.horizontalScrollbarHeight;
// var myHeight = grid.renderContainers.body.getViewportHeight(); // + grid.horizontalScrollbarHeight;

ret += '.grid' + grid.id + ' .ui-grid-pinned-container-' + $scope.side + ', .grid' + grid.id + ' .ui-grid-pinned-container-' + $scope.side + ' .ui-grid-render-container-' + $scope.side + ' .ui-grid-viewport { width: ' + myWidth + 'px; height: ' + myHeight + 'px; } ';
ret += '.grid' + grid.id + ' .ui-grid-pinned-container-' + $scope.side + ', .grid' + grid.id + ' .ui-grid-pinned-container-' + $scope.side + ' .ui-grid-render-container-' + $scope.side + ' .ui-grid-viewport { width: ' + myWidth + 'px; } ';
}

return ret;
Expand Down
49 changes: 34 additions & 15 deletions src/js/core/factories/GridRenderContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,22 @@ angular.module('ui.grid')

self.viewportAdjusters = [];

/**
* @ngdoc boolean
* @name hasHScrollbar
* @propertyOf ui.grid.class:GridRenderContainer
* @description flag to signal that container has a horizontal scrollbar
*/
self.hasHScrollbar = false;

/**
* @ngdoc boolean
* @name hasHScrollbar
* @propertyOf ui.grid.class:GridRenderContainer
* @description flag to signal that container has a vertical scrollbar
*/
self.hasVScrollbar = false;

/**
* @ngdoc boolean
* @name canvasHeightShouldUpdate
Expand Down Expand Up @@ -715,9 +731,16 @@ angular.module('ui.grid')
this.columnStyles = ret;
};

GridRenderContainer.prototype.needsHScrollbarPlaceholder = function () {
return this.grid.options.enableHorizontalScrollbar && !this.hasHScrollbar;
};

GridRenderContainer.prototype.getViewportStyle = function () {
var self = this;
var styles = {};

self.hasHScrollbar = false;
self.hasVScrollbar = false;

if (self.grid.disableScrolling) {
styles['overflow-x'] = 'hidden';
Expand All @@ -726,33 +749,29 @@ angular.module('ui.grid')
}

if (self.name === 'body') {
styles['overflow-x'] = self.grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
self.hasHScrollbar = self.grid.options.enableHorizontalScrollbar !== uiGridConstants.scrollbars.NEVER;
if (!self.grid.isRTL()) {
if (self.grid.hasRightContainerColumns()) {
styles['overflow-y'] = 'hidden';
}
else {
styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
if (!self.grid.hasRightContainerColumns()) {
self.hasVScrollbar = self.grid.options.enableVerticalScrollbar !== uiGridConstants.scrollbars.NEVER;
}
}
else {
if (self.grid.hasLeftContainerColumns()) {
styles['overflow-y'] = 'hidden';
}
else {
styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
if (!self.grid.hasLeftContainerColumns()) {
self.hasVScrollbar = self.grid.options.enableVerticalScrollbar !== uiGridConstants.scrollbars.NEVER;
}
}
}
else if (self.name === 'left') {
styles['overflow-x'] = 'hidden';
styles['overflow-y'] = self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
self.hasVScrollbar = self.grid.isRTL() ? self.grid.options.enableVerticalScrollbar !== uiGridConstants.scrollbars.NEVER : false;
}
else {
styles['overflow-x'] = 'hidden';
styles['overflow-y'] = !self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
self.hasVScrollbar = !self.grid.isRTL() ? self.grid.options.enableVerticalScrollbar !== uiGridConstants.scrollbars.NEVER : false;
}

styles['overflow-x'] = self.hasHScrollbar ? 'scroll' : 'hidden';
styles['overflow-y'] = self.hasVScrollbar ? 'scroll' : 'hidden';


return styles;


Expand Down
4 changes: 4 additions & 0 deletions src/less/grid.less
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
width: @gridBorderWidth;
}

.ui-grid-scrollbar-placeholder{
background-color: @headerVerticalBarColor;
}

.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar {
background-color: @headerVerticalBarColor;
}
Expand Down
1 change: 1 addition & 0 deletions src/templates/ui-grid/uiGridRenderContainer.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div class="ui-grid-render-container" ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }">
<div ui-grid-header></div>
<div ui-grid-viewport></div>
<div ng-if="colContainer.needsHScrollbarPlaceholder()" class="ui-grid-scrollbar-placeholder" style="height:{{colContainer.grid.scrollbarHeight}}px"></div>
<div ui-grid-footer ng-if="grid.options.showColumnFooter"></div>
</div>
2 changes: 1 addition & 1 deletion src/templates/ui-grid/uiGridViewport.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
<div ui-grid-row="row" row-render-index="rowRenderIndex"></div>
</div>
</div>
</div>
</div>

0 comments on commit 365f21f

Please sign in to comment.