Skip to content

Commit 1373b99

Browse files
c0brac0bra
committed
fix(uiGrid): Use margins rather than floats for pinning
Pinned containers were wrapping in certain scenarios where grids were being resi zed. It looked to the end-user like a poorly-rendered flash, and could possibly happen over and over during resizing. This fix uses margins to offset the body render container from the the left and right render containers Fixes #2997, Fixes #1957
1 parent 1a83269 commit 1373b99

File tree

7 files changed

+191
-52
lines changed

7 files changed

+191
-52
lines changed

‎misc/demo/pinning.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html class="no-js" ng-app="test"><!--<![endif]-->
3+
<head>
4+
<meta charset="utf-8">
5+
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
6+
<title></title>
7+
<meta content="width=device-width" name="viewport">
8+
9+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
10+
<link href="/dist/release/ui-grid.css" rel="stylesheet">
11+
12+
<!--<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>-->
13+
<script src="/lib/test/angular/1.2.26/angular.js"></script>
14+
<script src="/dist/release/ui-grid.js"></script>
15+
16+
<style>
17+
body {
18+
padding: 60px;
19+
min-height: 600px;
20+
}
21+
.grid {
22+
width: 100%;
23+
height: 400px;
24+
}
25+
.placeholder {
26+
height: 50%;
27+
width: 50%;
28+
border: 3px solid black;
29+
background: #ccc;
30+
}
31+
</style>
32+
</head>
33+
<body ng-controller="Main">
34+
<!-- <h1>Test</h1> -->
35+
36+
<!-- <div class="row main"> -->
37+
<h2>Grid</h2>
38+
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
39+
<!-- <div class="placeholder"> -->
40+
<!-- </div> -->
41+
42+
<br>
43+
<br>
44+
45+
<script>
46+
var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns']);
47+
app.controller('Main', function($scope, $http) {
48+
$scope.gridOptions = {};
49+
$scope.gridOptions.columnDefs = [
50+
{ name:'id', width:50 },
51+
{ name:'name', width:100, pinnedLeft:true },
52+
{ name:'age', width:100, pinnedRight:true },
53+
{ name:'address.street', width:150 },
54+
{ name:'address.city', width:150 },
55+
{ name:'address.state', width:50 },
56+
{ name:'address.zip', width:50 },
57+
{ name:'company', width:100 },
58+
{ name:'email', width:100 },
59+
{ name:'phone', width:200 },
60+
{ name:'about', width:300 },
61+
{ name:'friends[0].name', displayName:'1st friend', width:150 },
62+
{ name:'friends[1].name', displayName:'2nd friend', width:150 },
63+
{ name:'friends[2].name', displayName:'3rd friend', width:150 }
64+
];
65+
66+
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
67+
.success(function(data) {
68+
$scope.gridOptions.data = data;
69+
});
70+
});
71+
</script>
72+
</body>
73+
</html>
74+

‎src/features/pinning/less/pinning.less

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
11
@import '../../../less/variables';
22

33
.ui-grid-pinned-container {
4-
// position: absolute;
5-
float: left;
4+
position: absolute;
5+
display: inline;
6+
top: 0;
7+
8+
&.ui-grid-pinned-container-left {
9+
float: left;
10+
left: 0;
11+
}
12+
13+
&.ui-grid-pinned-container-right {
14+
float: right;
15+
right: 0;
16+
}
617

718
&.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {
819
box-sizing: border-box;
920
border-right: @gridBorderWidth solid;
1021
border-width: @gridBorderWidth;
11-
border-color: darken(@headerVerticalBarColor, 15%);
22+
border-right-color: darken(@headerVerticalBarColor, 15%);
1223
}
1324

1425
&.ui-grid-pinned-container-left .ui-grid-cell:last-child {
1526
box-sizing: border-box;
1627
border-right: @gridBorderWidth solid;
1728
border-width: @gridBorderWidth;
18-
border-color: darken(@verticalBarColor, 15%);
29+
border-right-color: darken(@verticalBarColor, 15%);
1930
}
2031

2132
&.ui-grid-pinned-container-left .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar, .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
@@ -41,14 +52,14 @@
4152
box-sizing: border-box;
4253
border-left: @gridBorderWidth solid;
4354
border-width: @gridBorderWidth;
44-
border-color: darken(@headerVerticalBarColor, 15%);
55+
border-left-color: darken(@headerVerticalBarColor, 15%);
4556
}
4657

4758
&.ui-grid-pinned-container-right .ui-grid-cell:first-child {
4859
box-sizing: border-box;
4960
border-left: @gridBorderWidth solid;
5061
border-width: @gridBorderWidth;
51-
border-color: darken(@verticalBarColor, 15%);
62+
border-left-color: darken(@verticalBarColor, 15%);
5263
}
5364

5465
&.ui-grid-pinned-container-right .ui-grid-header-cell:not(:first-child) .ui-grid-vertical-bar, .ui-grid-cell:not(:first-child) .ui-grid-vertical-bar {
@@ -71,5 +82,5 @@
7182
}
7283

7384
.ui-grid-render-container-body {
74-
float: left;
75-
}
85+
// float: left;
86+
}

‎src/js/core/directives/ui-pinned-container.js

+26-4
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,27 @@
2323

2424
$elm.addClass('ui-grid-pinned-container-' + $scope.side);
2525

26+
// Monkey-patch the viewport width function
27+
if ($scope.side === 'left' || $scope.side === 'right') {
28+
grid.renderContainers[$scope.side].getViewportWidth = monkeyPatchedGetViewportWidth;
29+
}
30+
31+
function monkeyPatchedGetViewportWidth() {
32+
/*jshint validthis: true */
33+
var self = this;
34+
35+
var viewportWidth = 0;
36+
self.visibleColumnCache.forEach(function (column) {
37+
viewportWidth += column.drawnWidth;
38+
});
39+
40+
var adjustment = self.getViewportAdjustment();
41+
42+
viewportWidth = viewportWidth + adjustment.width;
43+
44+
return viewportWidth;
45+
}
46+
2647
function updateContainerWidth() {
2748
if ($scope.side === 'left' || $scope.side === 'right') {
2849
var cols = grid.renderContainers[$scope.side].visibleColumnCache;
@@ -35,10 +56,10 @@
3556
return width;
3657
}
3758
}
38-
59+
3960
function updateContainerDimensions() {
4061
var ret = '';
41-
62+
4263
// Column containers
4364
if ($scope.side === 'left' || $scope.side === 'right') {
4465
myWidth = updateContainerWidth();
@@ -49,7 +70,7 @@
4970
$elm.attr('style', null);
5071

5172
var myHeight = grid.renderContainers.body.getViewportHeight(); // + grid.horizontalScrollbarHeight;
52-
73+
5374
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; } ';
5475
}
5576

@@ -61,6 +82,7 @@
6182

6283
// Subtract our own width
6384
adjustment.width -= myWidth;
85+
adjustment.side = $scope.side;
6486

6587
return adjustment;
6688
});
@@ -75,4 +97,4 @@
7597
}
7698
};
7799
}]);
78-
})();
100+
})();

0 commit comments

Comments
 (0)