fix(igxPivot): Adjust widths in header area. (#16348)

Author: MayaKirova

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -2022,7 +2022,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     protected getPivotRowHeaderContentWidth(headerGroup: IgxPivotRowHeaderGroupComponent) {
-        const headerSizes = this.getHeaderCellWidth(headerGroup.header.refInstance.nativeElement);
+        const headerSizes = this.getHeaderCellWidth(headerGroup.nativeElement);
         return headerSizes.width + headerSizes.padding;
     }
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -254,8 +254,8 @@
                             <igx-pivot-row-header-group #rowDimensionHeaders
                                 [ngClass]="dimCol.headerGroupClasses"
                                 [ngStyle]="dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger"
-                                [style.min-width]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
-                                [style.flex-basis]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
+                                [style.width.px]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
+                                [style.flex-basis.px]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
                                 [column]="dimCol"
                                 [rootDimension]="grid.visibleRowDimensions[colIndex]"
                                 [dimWidth]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html

@@ -28,7 +28,6 @@
         (keydown)="grid.navigation.headerNavigation($event)"
         [style.min-width]="getHeaderWidthFromDimension()"
         [style.width]="getHeaderWidthFromDimension()"
-        [style.flex-basis]="getHeaderWidthFromDimension()"
     >
     </igx-pivot-row-dimension-header>
     @if (!column.columnGroup && column.resizable) {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts

@@ -159,9 +159,6 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent
     }
 
     protected getHeaderWidthFromDimension() {
-        if (this.grid.hasHorizontalLayout) {
-            return this.dimWidth === -1 ? 'fit-content' : this.width;
-        }
-        return this.grid.rowDimensionWidth(this.parent.rootDimension);
+        return this.grid.hasHorizontalLayout && this.dimWidth === -1 ? 'fit-content' : null;
     }
 }