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

Author: mddragnev

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

@@ -719,6 +719,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 {
@@ -927,7 +930,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

@@ -1668,13 +1668,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return this.pinningPosition === ColumnPinningPosition.End && pinnedCols[0] === this;
     }
 
-    /** @hidden @internal **/
-    public get rightPinnedOffset(): string {
-        return this.pinned && this.pinningPosition === ColumnPinningPosition.End ?
-            - this.grid.pinnedEndWidth - this.grid.pinnedStartWidth + '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

@@ -102,7 +102,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]="col.rightPinnedOffset"
             [ngStyle]="{
                 'grid-template-rows':col.getGridTemplate(true),
                 'grid-template-columns':col.getGridTemplate(false),
@@ -155,7 +154,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,7 +26,6 @@ export class IgxGridRowComponent extends IgxRowDirective {
         };
     }
 
-
     public getContextMRL(pinnedCols, row) {
         return {
             $implicit: pinnedCols,

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

@@ -28,7 +28,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', () => {
 
@@ -134,7 +134,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;
@@ -694,9 +694,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
@@ -715,9 +720,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);
@@ -854,10 +863,10 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(grid.unpinnedColumns[1].field).toEqual('ID');
             expect(grid.getColumnByName('ID').pinned).toBeFalsy();
 
-             // move 'ID' column to the left pinned area, before ContractName
-             grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget);
-             tick();
-             fix.detectChanges();
+            // move 'ID' column to the left pinned area, before ContractName
+            grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget);
+            tick();
+            fix.detectChanges();
 
             // verify column is pinned at the correct place
             expect(grid.pinnedStartColumns[0].field).toEqual('ID');
@@ -887,7 +896,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(cellFax.active).toBe(false);
             expect(cellCompanyName.active).toBe(true);
 
-             // navigate from left pinned area into unpinned and back
+            // navigate from left pinned area into unpinned and back
             grid.navigation.activeNode = { row: 0, column: 0 };
             fix.detectChanges();
             expect(grid.getCellByColumn(0, "ContactName").active).toBe(true);
@@ -938,25 +947,33 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(grid.getColumnByName('Country').isFirstPinned).toBeTruthy();
             expect(grid.getColumnByName('ContactTitle').isLastPinned).toBeTruthy();
             const row = grid.gridAPI.get_row_by_index(0).nativeElement;
-            // check pinnedEnd cells are rendered after main display container and have left offset
-            for (let i = pinnedStart.length ; i <= pinnedStart.length + pinnedEnd.length - 1; i++) {
+            fix.detectChanges();
+            // check pinnedEnd cells are rendered after main display container
+            const displayContainerBoundingBox = row.querySelector('igx-display-container').getBoundingClientRect();
+            let initialStart = displayContainerBoundingBox.x + displayContainerBoundingBox.width;
+            for (let i = pinnedStart.length; i <= pinnedStart.length + pinnedEnd.length - 1; i++) {
                 const elem = row.children[i + 1];
-                expect(parseFloat((elem as any).style.left)).toBe(- (grid.pinnedEndWidth + grid.pinnedStartWidth));
+                const rect = elem.getBoundingClientRect();
+                expect(rect.x).toBe(initialStart);
+                initialStart += rect.width
             }
 
-            // check pinnedStart cells are rendered before main display container and have no left offset
-            for (let i = 0; i <= pinnedStart.length - 1; i++) {
+            // check pinnedStart cells are rendered before main display container
+            initialStart = displayContainerBoundingBox.x;
+            for (let i = pinnedStart.length - 1; i >= 0; i--) {
                 const elem = row.children[i];
-                expect((elem as any).style.left).toBe('');
+                const rect = elem.getBoundingClientRect();
+                expect(rect.x + rect.width).toBe(initialStart);
+                initialStart -= rect.width;
             }
 
             // check correct headers are pinned and in correct order.
             const pinnedHeaders = grid.headerGroupsList.filter(group => group.isPinned);
             expect(pinnedHeaders.length).toBe(10);
             expect(pinnedHeaders.map(x => x.column.header || x.column.field))
-            .toEqual(['General Information', 'CompanyName', 'Person Details',
-                 'ContactName', 'ContactTitle', 'Address Information',
-                  'Country', 'Region', 'City', 'Address']);
+                .toEqual(['General Information', 'CompanyName', 'Person Details',
+                    'ContactName', 'ContactTitle', 'Address Information',
+                    'Country', 'Region', 'City', 'Address']);
 
         });
 

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

@@ -93,8 +93,7 @@
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
-                    [column]="column"
-                    [style.left]="column.rightPinnedOffset">
+                    [column]="column">
                 </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', () => {

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

@@ -106,7 +106,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"
                         [style.flex-basis]="column.resolvedWidth"
-                        [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>