feat(igxGrid): fix dragGhost display #1607

Author: SAndreeva

projects/igniteui-angular/src/lib/grid/grid-header.component.ts

@@ -17,7 +17,6 @@ import { DataType } from '../data-operations/data-util';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { RestrictDrag } from '../directives/dragdrop/dragdrop.directive';
 import { IgxGridAPIService } from './api.service';
-import { IgxGridCellComponent } from './cell.component';
 import { IgxColumnComponent } from './column.component';
 import { autoWire, IGridBus, IgxColumnMovingService } from './grid.common';
 
@@ -153,6 +152,7 @@ export class IgxGridHeaderComponent implements IGridBus, OnInit, DoCheck, AfterV
     @HostListener('click', ['$event'])
     @autoWire(true)
     public onClick(event) {
+
         if (!this.column.grid.isColumnResizing) {
             event.stopPropagation();
             if (this.column.sortable) {
@@ -187,7 +187,8 @@ export class IgxGridHeaderComponent implements IGridBus, OnInit, DoCheck, AfterV
         const actualWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
 
         if (this.column.pinned) {
-            const pinnedMaxWidth = this._pinnedMaxWidth = this.grid.calcPinnedContainerMaxWidth - this.grid.pinnedWidth + actualWidth;
+            const pinnedMaxWidth = this._pinnedMaxWidth =
+                this.grid.calcPinnedContainerMaxWidth - this.grid.getPinnedWidth(true) + actualWidth;
 
             if (this.column.maxWidth && parseFloat(this.column.maxWidth) < pinnedMaxWidth) {
                 this._pinnedMaxWidth = this.column.maxWidth;
@@ -298,7 +299,7 @@ export class IgxGridHeaderComponent implements IGridBus, OnInit, DoCheck, AfterV
             const size = Math.ceil(largestCell + largestCellPadding) + 'px';
 
             if (this.column.pinned) {
-                const newPinnedWidth = this.grid.pinnedWidth - currentColWidth + parseFloat(size);
+                const newPinnedWidth = this.grid.getPinnedWidth(true) - currentColWidth + parseFloat(size);
 
                 if (newPinnedWidth <= this.grid.calcPinnedContainerMaxWidth) {
                     this.column.width = size;

projects/igniteui-angular/src/lib/grid/grid.common.ts

@@ -322,7 +322,8 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective {
 
         this._dragGhost.style.height = null;
         this._dragGhost.style.minWidth = null;
-        this._dragGhost.style.flexBasis  = null;
+        this._dragGhost.style.flexBasis = null;
+        this._dragGhost.style.position = null;
 
         const icon = document.createElement('i');
         const text = document.createTextNode('block');
@@ -415,7 +416,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
                 }
 
                 if (!this.cms.column.pinned && this.column.pinned) {
-                    const nextPinnedWidth = this.column.grid.getPinnedWidth() + parseFloat(this.cms.column.width);
+                    const nextPinnedWidth = this.column.grid.getPinnedWidth(true) + parseFloat(this.cms.column.width);
 
                     if (nextPinnedWidth <= this.column.grid.calcPinnedContainerMaxWidth) {
                         this.cms.icon.innerText = 'lock';
@@ -469,7 +470,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
 
             let nextPinnedWidth;
             if (this.column.pinned && !this.cms.column.pinned) {
-                nextPinnedWidth = this.column.grid.getPinnedWidth() + parseFloat(this.cms.column.width);
+                nextPinnedWidth = this.column.grid.getPinnedWidth(true) + parseFloat(this.cms.column.width);
             }
 
             if ((nextPinnedWidth && nextPinnedWidth > this.column.grid.calcPinnedContainerMaxWidth) ||
@@ -482,7 +483,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
 
             let col;
             const selectedCells = this.cms.column.grid.selectedCells;
-            if (selectedCells && this.cms.column.grid.selectedCells.length > 0) {
+            if (selectedCells && selectedCells.length > 0) {
                 col = selectedCells[0].column;
             }