fix(grid): Add flex:1 to the display container so that it grows or shrinks to the available width of the grid (#16036)

Author: mddragnev

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

@@ -718,6 +718,9 @@
     %grid-display-container-tr {
         width: 100%;
         overflow: visible;
+        flex: 1;
+        // needed to override the min-width of the column headers
+        min-width: 0;
     }
 
     %grid-mrl-block {
@@ -915,7 +918,7 @@
         }
 
         padding-block: 0;
-        flex: 1 0 auto;
+        flex: 0 0 auto;
         background: inherit;
         z-index: 4;
         cursor: move;

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1598,13 +1598,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return !this.grid.isPinningToStart && pinnedCols[0] === this;
     }
 
-    /** @hidden @internal **/
-    public get rightPinnedOffset(): string {
-        return this.pinned && !this.grid.isPinningToStart ?
-            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
-            null;
-    }
-
     /** @hidden @internal **/
     public get gridRowSpan(): number {
         return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1;

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

@@ -65,7 +65,6 @@
         <div class="igx-grid__mrl-block"
             [class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
             [class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
-            [style.left]="mrlRightPinnedOffset"
             [ngStyle]="{
                 'grid-template-rows':col.getGridTemplate(true),
                 'grid-template-columns':col.getGridTemplate(false),
@@ -113,7 +112,6 @@
         [style.min-width]="col.resolvedWidth"
         [style.max-width]="col.resolvedWidth"
         [style.flex-basis]="col.resolvedWidth"
-        [style.left]="col.rightPinnedOffset"
         [width]="col.getCellWidth()"
         [visibleColumnIndex]="col.visibleIndex"
         [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"

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

@@ -26,12 +26,6 @@ export class IgxGridRowComponent extends IgxRowDirective {
         };
     }
 
-    public get mrlRightPinnedOffset(): string {
-        return !this.grid.isPinningToStart ?
-            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
-            null;
-    }
-
     public getContextMRL(pinnedCols, row) {
         return {
             $implicit: pinnedCols,

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

@@ -25,7 +25,7 @@ import { IgxGridComponent } from './grid.component';
 import { DropPosition } from '../moving/moving.service';
 import { clearGridSubs, setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
-import { IPinningConfig } from '../public_api';
+import { IgxGridHeaderRowComponent, IPinningConfig } from '../public_api';
 
 describe('IgxGrid - Column Pinning #grid', () => {
 
@@ -130,7 +130,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(GridFunctions.isCellPinned(cell)).toBe(true);
             });
 
-           it('should allow pinning/unpinning via the column API', () => {
+            it('should allow pinning/unpinning via the column API', () => {
                 const col = grid.getColumnByName('ID');
 
                 col.pinned = true;
@@ -569,7 +569,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
             });
 
             it('should correctly pin column to right when row selectors are enabled.', () => {
-                grid.rowSelection =  GridSelectionMode.multiple;
+                grid.rowSelection = GridSelectionMode.multiple;
                 fix.detectChanges();
 
                 // check row DOM
@@ -690,9 +690,14 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 expect(grid.getColumnByName('CompanyName').isFirstPinned).toBeTruthy();
                 const row = grid.gridAPI.get_row_by_index(0).nativeElement;
                 // check cells are rendered after main display container and have left offset
+                const headerRowDisplayContainer = fix.debugElement.query(By.directive(IgxGridHeaderRowComponent)).nativeElement.querySelector(".igx-display-container");
+                const displayContainerRect = headerRowDisplayContainer.getBoundingClientRect();
+                let xAxis = displayContainerRect.x + displayContainerRect.width;
                 for (let i = 0; i <= pinnedCols.length - 1; i++) {
                     const elem = row.children[i + 1];
-                    expect(parseInt((elem as any).style.left, 10)).toBe(-330);
+                    const rect = elem.getBoundingClientRect();
+                    expect(rect.x).toBe(xAxis);
+                    xAxis += rect.width;
                 }
 
                 // check correct headers have left border
@@ -711,9 +716,13 @@ describe('IgxGrid - Column Pinning #grid', () => {
                 const row = grid.gridAPI.get_row_by_index(0).nativeElement;
                 expect(GridFunctions.getRowDisplayContainer(fix, 0)).toBeTruthy();
 
+                const headerRowdisplayContainer = fix.debugElement.query(By.directive(IgxGridHeaderRowComponent)).nativeElement.querySelector(".igx-display-container");
+                const displayContainerRect = headerRowdisplayContainer.getBoundingClientRect();
+                const xAxis = displayContainerRect.x + displayContainerRect.width;
+
                 expect(row.children[1].classList.contains(`${CELL_PINNED_CLASS}-first`)).toBeTruthy();
                 expect(row.children[1].classList.contains(GRID_MRL_BLOCK)).toBeTruthy();
-                expect(parseInt((row.children[1] as any).style.left, 10)).toEqual(-408);
+                expect(row.children[1].getBoundingClientRect().x).toEqual(xAxis);
 
                 // check correct headers have left border
                 const firstPinnedHeader = grid.headerGroupsList.find(group => group.isPinned);

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

@@ -99,8 +99,7 @@
                     [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
                     [column]="column"
                     [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                    [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                    [style.left]="column.rightPinnedOffset">
+                    [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
                 </igx-grid-header-group>
             }
         }

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

@@ -667,6 +667,18 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             );
             jasmine.getEnv().allowRespy(false);
         });
+
+        it('should calculate correct column headers width when rowSelection + expand indicators', () => {
+            hierarchicalGrid.rowSelection = 'multiple';
+            fixture.detectChanges();
+
+            const headerRowElement = hierarchicalGrid.nativeElement.querySelector("igx-grid-header-row");
+            const headerRowDiv = headerRowElement.querySelector(".igx-grid__tr");
+            const headerRowChildren = Array.from(headerRowDiv.children);
+
+            const elementsWidth = headerRowChildren.reduce((acc,el) => acc+(el as HTMLElement).offsetWidth, 0);
+            expect(elementsWidth).toEqual((headerRowDiv as HTMLElement).offsetWidth);
+        });
     });
 
     describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
@@ -1689,7 +1701,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             UIInteractions.simulateClickAndSelectEvent(row.expander);
             fixture.detectChanges();
 
-            let childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0];
+            const childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0];
             const childRow = childGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
             UIInteractions.simulateClickAndSelectEvent(childRow.expander);
             fixture.detectChanges();

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

@@ -119,7 +119,6 @@
                 [style.min-width]="col.resolvedWidth"
                 [style.max-width]="col.resolvedWidth"
                 [style.flex-basis]="col.resolvedWidth"
-                [style.left]="col.rightPinnedOffset"
                 [width]="col.getCellWidth()"
                 [visibleColumnIndex]="col.visibleIndex"
                 [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"

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

@@ -305,7 +305,7 @@
                         [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                         [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                         [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                        [style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)">
+                        (pointerdown)="grid.navigation.focusOutRowHeader($event)">
                     </igx-grid-header-group>
                 }
             }

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

@@ -55,8 +55,7 @@
             [style.min-height.px]="minHeight"
             [style.min-width]="col.resolvedWidth"
             [style.max-width]="col.resolvedWidth"
-            [style.flex-basis]="col.resolvedWidth"
-            [style.left]="col.rightPinnedOffset">
+            [style.flex-basis]="col.resolvedWidth">
         </igx-grid-summary-cell>
     }
 </ng-template>