fix(grid): column resizing line positioned correctly

Author: Zneeky

projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html

@@ -4,5 +4,5 @@
     [restrictHResizeMax]="colResizingService.restrictResizeMax"
     [restrictHResizeMin]="colResizingService.restrictResizeMin"
     [restrictResizerTop]="restrictResizerTop"
-    (resizeEnd)="colResizingService.resizeColumn($event)">
+    (resizeEnd)="colResizingService.resizeColumn($event, resizer.ratio)">
 </div>

projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts

@@ -41,8 +41,13 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     @Output() public resize = new Subject<any>();
 
     private _left: number;
+    private _ratio: number = 1;
     private _destroy = new Subject<boolean>();
 
+    public get ratio(): number {
+        return this._ratio;
+    }
+
     constructor(
         public element: ElementRef<HTMLElement>,
         @Inject(DOCUMENT) public document,
@@ -56,7 +61,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
                 .pipe(
                     takeUntil(this._destroy),
                     takeUntil<MouseEvent>(this.resizeEnd),
-                    map((event) => event.clientX - offset),
+                    map((event) => (event.clientX - offset) / (this._ratio)),
                 ))
         )
             .subscribe((pos) => {
@@ -113,8 +118,12 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     public onMousedown(event: MouseEvent) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
-
-        this.left = this._left = event.clientX - parent.getBoundingClientRect().left;
+        const parentRectWidth = parent.getBoundingClientRect().width;
+        const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width);
+        if (parentRectWidth && parentComputedWidth && parentRectWidth / parentComputedWidth !== 1) {
+            this._ratio = parentRectWidth / parentComputedWidth;
+        }
+        this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / (this._ratio);
         this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;
 
         this.resizeStart.next(event);

projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

@@ -101,9 +101,9 @@ export class IgxColumnResizingService {
     /**
      * Resizes the column regaridng to the column minWidth and maxWidth.
      */
-    public resizeColumn(event: MouseEvent) {
+    public resizeColumn(event: MouseEvent, ratio: number = 1) {
         this.showResizer = false;
-        const diff = event.clientX - this.startResizePos;
+        const diff = (event.clientX - this.startResizePos) / ratio;
 
         const colWidth = this.column.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;