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
angular-ui · Apr 27, 2015 · 1373b99 · 1373b99
1 parent 1a83269
commit 1373b99
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 52 deletions.
diff --git a/misc/demo/pinning.html b/misc/demo/pinning.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class="no-js" ng-app="test"><!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <title></title>
+    <meta content="width=device-width" name="viewport">
+
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
+    <link href="/dist/release/ui-grid.css" rel="stylesheet">
+
+    <!--<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>-->
+    <script src="/lib/test/angular/1.2.26/angular.js"></script>
+    <script src="/dist/release/ui-grid.js"></script>
+
+    <style>
+        body {
+            padding: 60px;
+            min-height: 600px;
+        }
+        .grid {
+            width: 100%;
+            height: 400px;
+        }
+        .placeholder {
+            height: 50%;
+            width: 50%;
+            border: 3px solid black;
+            background: #ccc;
+        }
+    </style>
+</head>
+<body ng-controller="Main">
+<!-- <h1>Test</h1> -->
+
+<!-- <div class="row main"> -->
+<h2>Grid</h2>
+<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
+<!-- <div class="placeholder"> -->
+<!-- </div> -->
+
+<br>
+<br>
+
+<script>
+    var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns']);
+    app.controller('Main', function($scope, $http) {
+        $scope.gridOptions = {};
+        $scope.gridOptions.columnDefs = [
+            { name:'id', width:50 },
+            { name:'name', width:100, pinnedLeft:true },
+            { name:'age', width:100, pinnedRight:true  },
+            { name:'address.street', width:150  },
+            { name:'address.city', width:150 },
+            { name:'address.state', width:50 },
+            { name:'address.zip', width:50 },
+            { name:'company', width:100 },
+            { name:'email', width:100 },
+            { name:'phone', width:200 },
+            { name:'about', width:300 },
+            { name:'friends[0].name', displayName:'1st friend', width:150 },
+            { name:'friends[1].name', displayName:'2nd friend', width:150 },
+            { name:'friends[2].name', displayName:'3rd friend', width:150 }
+        ];
+
+        $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
+                .success(function(data) {
+                    $scope.gridOptions.data = data;
+                });
+    });
+</script>
+</body>
+</html>
+
diff --git a/src/features/pinning/less/pinning.less b/src/features/pinning/less/pinning.less
@@ -1,21 +1,32 @@
 @import '../../../less/variables';
 
 .ui-grid-pinned-container {
-  // position: absolute;
-  float: left;
+  position: absolute;
+  display: inline;
+  top: 0;
+
+  &.ui-grid-pinned-container-left {
+    float: left;
+    left: 0;
+  }
+
+  &.ui-grid-pinned-container-right {
+    float: right;
+    right: 0;
+  }
 
   &.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {
     box-sizing: border-box;
     border-right: @gridBorderWidth solid;
     border-width: @gridBorderWidth;
-    border-color: darken(@headerVerticalBarColor, 15%);
+    border-right-color: darken(@headerVerticalBarColor, 15%);
   }
 
   &.ui-grid-pinned-container-left .ui-grid-cell:last-child {
     box-sizing: border-box;
     border-right: @gridBorderWidth solid;
     border-width: @gridBorderWidth;
-    border-color: darken(@verticalBarColor, 15%);
+    border-right-color: darken(@verticalBarColor, 15%);
   }
 
   &.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 @@
     box-sizing: border-box;
     border-left: @gridBorderWidth solid;
     border-width: @gridBorderWidth;
-    border-color: darken(@headerVerticalBarColor, 15%);
+    border-left-color: darken(@headerVerticalBarColor, 15%);
   }
 
   &.ui-grid-pinned-container-right .ui-grid-cell:first-child {
     box-sizing: border-box;
     border-left: @gridBorderWidth solid;
     border-width: @gridBorderWidth;
-    border-color: darken(@verticalBarColor, 15%);
+    border-left-color: darken(@verticalBarColor, 15%);
   }
 
   &.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 @@
 }
 
 .ui-grid-render-container-body {
-  float: left;
-}
+  // float: left;
+}
diff --git a/src/js/core/directives/ui-pinned-container.js b/src/js/core/directives/ui-pinned-container.js
@@ -23,6 +23,27 @@
 
             $elm.addClass('ui-grid-pinned-container-' + $scope.side);
 
+            // Monkey-patch the viewport width function
+            if ($scope.side === 'left' || $scope.side === 'right') {
+              grid.renderContainers[$scope.side].getViewportWidth = monkeyPatchedGetViewportWidth;
+            }
+
+            function monkeyPatchedGetViewportWidth() {
+              /*jshint validthis: true */
+              var self = this;
+
+              var viewportWidth = 0;
+              self.visibleColumnCache.forEach(function (column) {
+                viewportWidth += column.drawnWidth;
+              });
+
+              var adjustment = self.getViewportAdjustment();
+
+              viewportWidth = viewportWidth + adjustment.width;
+
+              return viewportWidth;
+            }
+
             function updateContainerWidth() {
               if ($scope.side === 'left' || $scope.side === 'right') {
                 var cols = grid.renderContainers[$scope.side].visibleColumnCache;
@@ -35,10 +56,10 @@
                 return width;
               }
             }
-            
+
             function updateContainerDimensions() {
               var ret = '';
-              
+
               // Column containers
               if ($scope.side === 'left' || $scope.side === 'right') {
                 myWidth = updateContainerWidth();
@@ -49,7 +70,7 @@
                 $elm.attr('style', null);
 
                 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; } ';
               }
 
@@ -61,6 +82,7 @@
 
               // Subtract our own width
               adjustment.width -= myWidth;
+              adjustment.side = $scope.side;
 
               return adjustment;
             });
@@ -75,4 +97,4 @@
       }
     };
   }]);
-})();
+})();