chore(*): Resolve styling issues due to overflowing elements.

Author: MKirova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -577,6 +577,14 @@
             @extend %igx-grid__tr-pivot-group !optional
         }
 
+        @include e(tr-pivot, $m: 'columnLeaf') {
+            @extend %igx-grid__tr-pivot--columnLeaf !optional
+        }
+
+        @include e(tr-pivot, $m: 'columnMultiRowSpan') {
+            @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional
+        }
+
         @include e(tr-pivot-toggle-icons) {
             @extend %igx-grid__tr-pivot-toggle-icons !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -2977,6 +2977,17 @@
     %igx-grid__tr-pivot-toggle-icons {
         display: inline-flex !important;
     }
+
+    %igx-grid__tr-pivot--columnLeaf {
+        box-shadow: none !important;
+    }
+    %igx-grid__tr-pivot--columnMultiRowSpan {
+        igx-grid-header {
+            > * {
+                visibility: hidden;
+            }
+        }
+    }
     // Pivot grid END
 }
 

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

@@ -163,18 +163,19 @@
             </ng-container>
         </ng-container>
     <div [style.max-height.px]='maxContainerHeight'>
-        <div style='overflow:visible;' [style.height.px]='grid.rowHeight' class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel' [style.width.px]='grid.unpinnedWidth'>
+        <div style='overflow:visible;' [style.height.px]='grid.rowHeight' class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>
             <ng-template igxGridFor #headerVirtualContainer let-column
                 [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]="grid.parentVirtDir"
                 [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
                 [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
                 <igx-grid-header-group [ngClass]="column.headerGroupClasses"
-                [style.height.px]='calcHeight(column)'
+                [style.height.px]='calcHeight(column, i)'
                 [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                 [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                (pointerdown)="grid.navigation.focusOutRowHeader($event)"
-                [style.visibility]='getVisibility(column, dimLevelColumns)'>
+                [class.igx-grid__tr-pivot--columnLeaf] = 'isDuplicateOfExistingParent(column, i)'
+                [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'
+                >
             </igx-grid-header-group>
             </ng-template>
         </div>

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

@@ -94,16 +94,20 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         return this.totalDepth * this.grid.renderedRowHeight;
     }
 
-    public calcHeight(col: ColumnType) {
-        return !col.columnGroup && col.level < this.totalDepth ? (this.totalDepth - col.level) * this.grid.rowHeight : this.grid.rowHeight;
+    public calcHeight(col: ColumnType, index: number) {
+        return !col.columnGroup && col.level < this.totalDepth && col.level === index ? (this.totalDepth - col.level) * this.grid.rowHeight : this.grid.rowHeight;
     }
 
-    public getVisibility(col: ColumnType, collection: ColumnType[]) {
-        const lvl = this.columnDimensionsByLevel.indexOf(collection)
+    public isDuplicateOfExistingParent(col: ColumnType, lvl: number) {
         const parentCollection = lvl > 0 ? this.columnDimensionsByLevel[lvl - 1] : [];
         const duplicate = parentCollection.indexOf(col) !== -1;
 
-        return duplicate ? 'hidden' : undefined;
+        return duplicate;
+    }
+    
+    public isMultiRow(col: ColumnType, lvl: number) {
+        const isLeaf = !col.columnGroup;
+        return isLeaf && lvl !== this.totalDepth - 1 ;
     }