Skip to content

Commit

Permalink
fix(Grid): Adjust available width for columns
Browse files Browse the repository at this point in the history
With the newer native scrollbar changes we need to subtract the scrollbar
width from the available width used to render the columns, otherwise the
viewport contents will overflow the visible area and cause the viewport to
scroll horizontally when we don't want it to.

Thanks to @dczepierga for tracking down the cause and solution.

Fixes #2521, #2734, #2592
  • Loading branch information
c0bra committed Feb 16, 2015
1 parent e099c5b commit cf86090
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 6 deletions.
16 changes: 16 additions & 0 deletions src/features/resize-columns/less/column-resizer.less
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,22 @@
}
}

// Add a visual border for final column's resizer element
.ui-grid-header-cell:last-child .ui-grid-column-resizer.right {
border-right: @gridBorderWidth solid @borderColor;
}

// Put visual border on left of last header cell when direction is rtl
.ui-grid[dir=rtl] .ui-grid-header-cell:last-child {
.ui-grid-column-resizer.right {
border-right: 0;
}

.ui-grid-column-resizer.left {
border-left: @gridBorderWidth solid @borderColor;
}
}

.ui-grid {
&.column-resizing {
cursor: col-resize;
Expand Down
2 changes: 1 addition & 1 deletion src/js/core/directives/ui-grid-header.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

function updateColumnWidths() {
// Get the width of the viewport
var availableWidth = containerCtrl.colContainer.getViewportWidth();
var availableWidth = containerCtrl.colContainer.getViewportWidth() - grid.scrollbarWidth;

//if (typeof(uiGridCtrl.grid.verticalScrollbarWidth) !== 'undefined' && uiGridCtrl.grid.verticalScrollbarWidth !== undefined && uiGridCtrl.grid.verticalScrollbarWidth > 0) {
// availableWidth = availableWidth + uiGridCtrl.grid.verticalScrollbarWidth;
Expand Down
2 changes: 1 addition & 1 deletion src/js/core/factories/GridRenderContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,7 @@ angular.module('ui.grid')
totalWidth = 0;

// Get the width of the viewport
var availableWidth = self.getViewportWidth();
var availableWidth = self.getViewportWidth() - self.grid.scrollbarWidth;

//if (typeof(self.grid.verticalScrollbarWidth) !== 'undefined' && self.grid.verticalScrollbarWidth !== undefined && self.grid.verticalScrollbarWidth > 0) {
// availableWidth = availableWidth + self.grid.verticalScrollbarWidth;
Expand Down
2 changes: 1 addition & 1 deletion src/less/cell.less
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
box-sizing: border-box;

&:last-child {
// border-right: 0;
border-right: 0;
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/less/header.less
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@
border-right: @gridBorderWidth solid;
border-color: @headerVerticalBarColor;

&:last-child {
border-right: 0;
}

.user-select(none);

// Default to width 0 so header height can calculate right. Otherwise
Expand Down
4 changes: 2 additions & 2 deletions src/less/rtl.less
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
}

.ui-grid-cell:last-child, .ui-grid-header-cell:last-child {
border-left: @gridBorderWidth solid;
border-color: @borderColor;
border-right: @gridBorderWidth solid @borderColor;
border-left: 0;
}

.ui-grid-header-cell:first-child .ui-grid-vertical-bar,
Expand Down
2 changes: 1 addition & 1 deletion test/unit/core/directives/ui-grid.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ describe('ui-grid', function() {
renderWidth += c.drawnWidth;
});

expect(renderWidth).toBe(gridApi.grid.gridWidth);
expect(renderWidth).toBe(gridApi.grid.getViewportWidth() - gridApi.grid.scrollbarWidth);
});
});

Expand Down

0 comments on commit cf86090

Please sign in to comment.