Merge pull request #12360 from IgniteUI/mkirova/fix-12024

fix(igxGrid): Include scale in calculations for column autosize api.

Author: dkamburov

projects/igniteui-angular/src/lib/core/utils.ts

@@ -291,7 +291,8 @@ export class PlatformUtil {
         }
 
         range.selectNodeContents(node);
-        const width = range.getBoundingClientRect().width;
+        const scale = node.getBoundingClientRect().width / node.offsetWidth;
+        const width = range.getBoundingClientRect().width / scale;
 
         if (!this.isFirefox) {
             // we need that hack - otherwise content won't be measured correctly in IE/Edge

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -385,6 +385,17 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(column.width).toEqual('67px');
         }));
 
+        it('should autosize column correctly if there is scaling via css.', fakeAsync(/** height/width setter rAF */() => {
+            grid.nativeElement.style.transform = 'scale(0.6)';
+            const column = grid.getColumnByName('Items');
+
+            column.autosize();
+            fixture.detectChanges();
+
+            expect(column.width).toEqual('92px');
+            grid.nativeElement.style.transform = '';
+        }));
+
         it('should autosize column programmatically based only on header.', fakeAsync(() => {
             const column = fixture.componentInstance.grid.columnList.filter(c => c.field === 'ReleaseDate')[0];
             expect(column.width).toEqual('100px');

src/app/grid-column-resizing/grid-column-resizing.sample.css

@@ -1,5 +1,6 @@
 .wrapper {
     margin: 24px;
+    transform: scale(0.6);
 }
 
 [igxButton]+[igxButton] {

src/app/grid-column-resizing/grid-column-resizing.sample.html

@@ -9,6 +9,7 @@
         </igx-column>
     </igx-grid>
     <br />
+    <button igxButton="raised" (click)="autoSizeAll()">AutoSize API</button>
     <button igxButton="raised" (click)="toggleColumn('ContactName')">Pin/Unpin 'ContactName'</button>
     <button igxButton="raised" (click)="toggleColumn('ContactTitle')">Pin/Unpin 'ContactTitle'</button>
     <button igxButton="raised" (click)="toggleColumn('Address')">Pin/Unpin 'Address'</button>

src/app/grid-column-resizing/grid-column-resizing.sample.ts

@@ -23,7 +23,7 @@ export class GridColumnResizingSampleComponent implements OnInit {
             // % width, no min/max width.
             { field: 'ContactName', width: '20%', resizable: true },
             // % width, % min/max width.
-            { field: 'ContactTitle', width: '30%', resizable: true, maxWidth: '5%'},
+            { field: 'ContactTitle', width: '30%', resizable: true, maxWidth: '30%'},
             // px width, % min/max width.
             { field: 'Address', width: 300, resizable: true, maxWidth: '20%', minWidth: '15%' },
             { field: 'City', width: 100, resizable: true },
@@ -73,4 +73,8 @@ export class GridColumnResizingSampleComponent implements OnInit {
     public scrScrollTo(index) {
         this.grid1.verticalScrollContainer.scrollTo(parseInt(index, 10));
     }
+
+    public autoSizeAll() {
+        this.grid1.columns.forEach(x => x.autosize());
+    }
 }