diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index cc5ce39d8af..283ea92dccb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/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; diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 9a1e0e43e9a..658b9a6345a 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/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; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html index 7289bc16f29..9ad5f744f38 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html @@ -65,7 +65,6 @@
{ @@ -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); diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html index 37562393578..aeafecf93bc 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html +++ b/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"> } } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 69f87fbed2b..153afd981d6 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/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(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 42d4a19c5d3..eaca77bf5f6 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/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" diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index 6585cf8c3e5..007ad3f01af 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/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)"> } } diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html index 9bcc77428bb..af0d975e076 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html +++ b/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"> } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html index 05bbb9e49c4..f9f61475d70 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html @@ -123,7 +123,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" @@ -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"