fix(Column Moving): Abs instead of fixed position

Fixed positioning in IE wasn't displaying correctly. This change uses
relative positioning on the header row container, and absolute positioning
on the cloned column header element.

This also prevents having to check for IE when doing the positioning.

Fixes #2894

src/features/move-columns/js/column-movable.js

@@ -253,7 +253,7 @@
                  * - if we are a touchstart then we listen for a touchmove, if we are a mousedown we listen for
                  * a mousemove (i.e. a drag) before we decide that there's a move underway.  If there's never a move,
                  * and we instead get a mouseup or a touchend, then we just drop out again and do nothing.
-                 * 
+                 *
                  */
                 var $contentsElm = angular.element( $elm[0].querySelectorAll('.ui-grid-cell-contents') );
 
@@ -281,11 +281,11 @@
                     $document.on('touchend', upFn);
                   }
                 };
-                
+
                 var moveFn = function( event ) {
                   //Disable text selection in Chrome during column move
                   document.onselectstart = function() { return false; };
-                  
+
                   moveOccurred = true;
 
                   var changeValue = event.pageX - previousMouseX;
@@ -297,7 +297,7 @@
                     previousMouseX = event.pageX;
                   }
                 };
-                
+
                 var upFn = function( event ){
                   //Re-enable text selection after column move
                   document.onselectstart = null;
@@ -307,7 +307,7 @@
                     movingElm.remove();
                     elmCloned = false;
                   }
-                  
+
                   offAllEvents();
                   onDownEvents();
 
@@ -366,12 +366,12 @@
                     }
                   }
                 };
-                
+
                 var onDownEvents = function(){
                   $contentsElm.on('touchstart', downFn);
                   $contentsElm.on('mousedown', downFn);
                 };
-                
+
                 var offAllEvents = function() {
                   $contentsElm.off('touchstart', downFn);
                   $contentsElm.off('mousedown', downFn);
@@ -382,7 +382,7 @@
                   $document.off('mouseup', upFn);
                   $document.off('touchend', upFn);
                 };
-                
+
                 onDownEvents();
 
 
@@ -429,12 +429,8 @@
                   var currentElmLeft = movingElm[0].getBoundingClientRect().left - 1;
                   var currentElmRight = movingElm[0].getBoundingClientRect().right;
                   var newElementLeft;
-                  if (gridUtil.detectBrowser() === 'ie') {
-                    newElementLeft = currentElmLeft + changeValue;
-                  }
-                  else {
-                    newElementLeft = currentElmLeft - gridLeft + changeValue;
-                  }
+
+                  newElementLeft = currentElmLeft - gridLeft + changeValue;
                   newElementLeft = newElementLeft < rightMoveLimit ? newElementLeft : rightMoveLimit;
 
                   //Update css of moving column to adjust to new left value or fire scroll in case column has reached edge of grid

src/features/move-columns/less/colMovable.less

@@ -1,12 +1,12 @@
 @import '../../../less/variables';
 
 .movingColumn {
-
-  position: fixed;
+  position: absolute;
+  top: 0;
   border: 1px solid @borderColor;
   box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
 
   .ui-grid-icon-angle-down {
     display: none;
   }
-}
+}

src/less/header.less

@@ -53,6 +53,7 @@
 
 .ui-grid-header-cell-row {
   display: table-row;
+  position: relative
 }
 
 .ui-grid-header-cell {