fix(uiGridHeader): handle leftover pixels

Grid widths that can't be equally divided among columns (i.e. 500px / 3 columns == 166px with 2px leftover) was leaving the 2px visible at the end of the grid. This fix divides the extra pixels among the columns starting at the front.
angular-ui · Mar 13, 2014 · 64941b3 · 64941b3 · sheerun · Mar 19, 2014
1 parent 2b55324
commit 64941b3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/features/resize-columns/test/resizeColumns.spec.js b/src/features/resize-columns/test/resizeColumns.spec.js
@@ -94,13 +94,13 @@ describe('ui.grid.resizeColumns', function () {
   });
 
   // NOTE: these pixel sizes might fail in other browsers, due to font differences!
-  describe('when double-clicking a resizer', function () {
+  describe('double-clicking a resizer', function () {
     it('should resize the column to the maximum width of the rendered columns', function (done) {
       var firstResizer = $(grid).find('[ui-grid-column-resizer]').first();
 
       var colWidth = $(grid).find('.col0').first().width();
 
-      expect(colWidth).toEqual(166);
+      expect(colWidth === 166 || colWidth === 167).toBe(true); // allow for column widths that don't equally divide 
 
       firstResizer.trigger('dblclick');
 

diff --git a/src/js/core/directives/ui-grid-header.js b/src/js/core/directives/ui-grid-header.js
@@ -93,7 +93,7 @@
 
                   column.drawnWidth = column.width;
 
-                  ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + column.width + 'px; }';
+                  // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + column.width + 'px; }';
                 }
               });
 
@@ -119,7 +119,7 @@
                     canvasWidth += colWidth;
                     column.drawnWidth = colWidth;
 
-                    ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
+                    // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
 
                     // Remove this element from the percent array so it's not processed below
                     percentArray.splice(i, 1);
@@ -132,7 +132,7 @@
                     canvasWidth += colWidth;
                     column.drawnWidth = colWidth;
 
-                    ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
+                    // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
 
                     // Remove this element from the percent array so it's not processed below
                     percentArray.splice(i, 1);
@@ -147,7 +147,7 @@
 
                   column.drawnWidth = colWidth;
 
-                  ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
+                  // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
                 });
               }
 
@@ -169,7 +169,7 @@
                     canvasWidth += colWidth;
                     column.drawnWidth = colWidth;
 
-                    ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
+                    // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
 
                     lastColumn = column;
 
@@ -185,7 +185,7 @@
                     canvasWidth += colWidth;
                     column.drawnWidth = colWidth;
 
-                    ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
+                    // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
 
                     // Remove this element from the percent array so it's not processed below
                     asterisksArray.splice(i, 1);
@@ -202,10 +202,32 @@
 
                   column.drawnWidth = colWidth;
 
-                  ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
+                  // ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
                 });
               }
 
+
+              // If the grid width didn't divide evenly into the column widths and we have pixels left over, dole them out to the columns one by one to make everything fit
+              var leftoverWidth = uiGridCtrl.grid.gridWidth - parseInt(canvasWidth, 10);
+
+              if (leftoverWidth > 0 && canvasWidth > 0) {
+                var remFn = function (column) {
+                  if (leftoverWidth > 0) {
+                    column.drawnWidth = column.drawnWidth + 1;
+                    canvasWidth = canvasWidth + 1;
+                    leftoverWidth--;
+                  }
+                };
+                while (leftoverWidth > 0) {
+                  uiGridCtrl.grid.columns.forEach(remFn);
+                }
+              }
+
+              // Build the CSS
+              uiGridCtrl.grid.columns.forEach(function (column) {
+                ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + column.drawnWidth + 'px; }';
+              });
+
               $scope.columnStyles = ret;
 
               uiGridCtrl.grid.canvasWidth = parseInt(canvasWidth, 10);