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 0166b635863..25bae775955 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 @@ -1303,6 +1303,8 @@ overflow: hidden; z-index: 1; outline-style: none; + flex-grow: 1; + width: 100%; } %grid-tbody-container { @@ -1361,6 +1363,7 @@ background: var-get($theme, 'content-background'); border-inline-start: rem(1px) solid var-get($theme, 'row-border-color'); position: relative; + grid-column: 2 } %grid-tbody-scrollbar-start { @@ -2084,7 +2087,7 @@ .sort-icon { color: var-get($theme, 'header-selected-text-color'); - + ::after { background: var-get($theme, 'header-selected-background'); } @@ -2112,7 +2115,7 @@ &%igx-grid-th--sorted { .sort-icon { color: var-get($theme, 'header-selected-text-color'); - + > igx-icon { color: inherit; } @@ -2120,7 +2123,7 @@ &:focus, &:hover { color: var-get($theme, 'header-selected-text-color'); - + > igx-icon { color: inherit; } @@ -2177,14 +2180,14 @@ .sort-icon { opacity: 1; color: var-get($theme, 'sorted-header-icon-color'); - + > igx-icon { color: inherit; } &:hover { color: var-get($theme, 'sortable-header-icon-hover-color'); - + > igx-icon { color: inherit; } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 160253bf11f..d439786d7c3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6511,16 +6511,12 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.isPercentWidth) { /* width in %*/ - const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'); + const computed = this.document.defaultView.getComputedStyle(this.tbody.nativeElement).getPropertyValue('width'); width = computed.indexOf('%') === -1 ? parseFloat(computed) : null; } else { width = parseInt(this.width, 10); } - if (!width && this.nativeElement) { - width = this.nativeElement.offsetWidth; - } - if (this.width === null || !width) { this.isColumnWidthSum = true; @@ -6529,7 +6525,7 @@ export abstract class IgxGridBaseDirective implements GridType, this.isColumnWidthSum = false; } - if (this.hasVerticalScroll() && this.width !== null) { + if (!this.isPercentWidth && this.hasVerticalScroll() && this.width !== null) { width -= this.scrollSize; } if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) { @@ -6906,59 +6902,12 @@ export abstract class IgxGridBaseDirective implements GridType, } } - /** - * @hidden - */ - protected getGroupAreaHeight(): number { - return 0; - } - /** * @hidden */ protected getComputedHeight(elem) { return elem.offsetHeight ? parseFloat(this.document.defaultView.getComputedStyle(elem).getPropertyValue('height')) : 0; } - /** - * @hidden - */ - protected getFooterHeight(): number { - return this.summaryRowHeight || this.getComputedHeight(this.tfoot.nativeElement); - } - /** - * @hidden - */ - protected getTheadRowHeight(): number { - // D.P.: Before CSS loads,theadRow computed height will be 'auto'->NaN, so use 0 fallback - const height = this.getComputedHeight(this.theadRow.nativeElement) || 0; - return (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ? - height - this.getFilterCellHeight() : - height; - } - - /** - * @hidden - */ - protected getToolbarHeight(): number { - let toolbarHeight = 0; - if (this.toolbar.first) { - toolbarHeight = this.getComputedHeight(this.toolbar.first.nativeElement); - } - return toolbarHeight; - } - - /** - * @hidden - */ - protected getPagingFooterHeight(): number { - let pagingHeight = 0; - if (this.footer) { - const height = this.getComputedHeight(this.footer.nativeElement); - pagingHeight = this.footer.nativeElement.firstElementChild ? - height : 0; - } - return pagingHeight; - } /** * @hidden @@ -6978,21 +6927,12 @@ export abstract class IgxGridBaseDirective implements GridType, if (!this._height) { return null; } - const actualTheadRow = this.getTheadRowHeight(); - const footerHeight = this.getFooterHeight(); - const toolbarHeight = this.getToolbarHeight(); - const pagingHeight = this.getPagingFooterHeight(); - const groupAreaHeight = this.getGroupAreaHeight(); - const scrHeight = this.getComputedHeight(this.scr.nativeElement); - const renderedHeight = toolbarHeight + actualTheadRow + - footerHeight + pagingHeight + groupAreaHeight + - scrHeight; let gridHeight = 0; if (this.isPercentHeight) { const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('height'); - const autoSize = this._shouldAutoSize(renderedHeight); + const autoSize = this._shouldAutoSize(); if (autoSize || computed.indexOf('%') !== -1) { const bodyHeight = this.getDataBasedBodyHeight(); return bodyHeight > 0 ? bodyHeight : null; @@ -7001,7 +6941,7 @@ export abstract class IgxGridBaseDirective implements GridType, } else { gridHeight = parseInt(this._height, 10); } - const height = Math.abs(gridHeight - renderedHeight); + const height = this.getComputedHeight(this.tbodyContainer.nativeElement) || gridHeight || 0; if (Math.round(height) === 0 || isNaN(gridHeight)) { const bodyHeight = this.defaultTargetBodyHeight; @@ -7019,12 +6959,14 @@ export abstract class IgxGridBaseDirective implements GridType, return origHeight !== height; } - protected _shouldAutoSize(renderedHeight) { - this.tbody.nativeElement.style.display = 'none'; + protected _shouldAutoSize() { + const parentElement = this.nativeElement.parentElement || (this.nativeElement.getRootNode() as any).host; + const parentHeight = parentElement?.clientHeight; + this.tbody.nativeElement.style.display = 'none'; let res = !parentElement || parentElement.clientHeight === 0 || - parentElement.clientHeight === renderedHeight; + parentElement.clientHeight !== parentHeight; if (parentElement && (res || this._autoSize)) { // If grid causes the parent container to extend (for example when container is flex) // we should always auto-size since the actual size of the container will continuously change as the grid renders elements. diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 9e25636960f..9c6d27229c3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -459,10 +459,10 @@ describe('IgxGrid - multi-column headers #grid', () => { const locationColGroup = getColGroup(grid, 'Location'); const gridWidthInPx = ((parseInt(gridWidth, 10) / 100) * - parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize) + 'px'; - expect(locationColGroup.width).toBe(gridWidthInPx); + parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize); + expect((parseFloat(locationColGroup.width))).toBeCloseTo(gridWidthInPx, 0); const cityColumn = grid.getColumnByName('City'); - expect(cityColumn.width).toBe(gridWidthInPx); + expect(parseFloat(cityColumn.width)).toBeCloseTo(gridWidthInPx, 0); }); it('Width should be correct. Column group with column. Column width in px.', () => { @@ -554,13 +554,13 @@ describe('IgxGrid - multi-column headers #grid', () => { const colWidth = gridWidthInPx / 3; const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); - expect(locationColGroup.width).toBe(colWidth * 3 + 'px'); + expect((parseFloat(locationColGroup.width))).toBeCloseTo(colWidth * 3, 0); const countryColumn = grid.getColumnByName('Country'); - expect(countryColumn.width).toBe(colWidthPx); + expect(parseFloat(countryColumn.width)).toBeCloseTo(colWidth, 0); const regionColumn = grid.getColumnByName('Region'); - expect(regionColumn.width).toBe(colWidthPx); + expect(parseFloat(regionColumn.width)).toBeCloseTo(colWidth, 0); const cityColumn = grid.getColumnByName('City'); - expect(cityColumn.width).toBe(colWidthPx); + expect(parseFloat(cityColumn.width)).toBeCloseTo(colWidth, 0); }); it('Width should be correct. Column group with three columns. Columns with mixed width - px and percent.', async () => { @@ -576,8 +576,8 @@ describe('IgxGrid - multi-column headers #grid', () => { // check group has correct size. let locationColGroup = getColGroup(grid, 'Location'); - let expectedWidth = (200 + grid.calcWidth * 0.7) + 'px'; - expect(locationColGroup.width).toBe(expectedWidth); + let expectedWidth = (200 + grid.calcWidth * 0.7); + expect(parseFloat(locationColGroup.width)).toBeCloseTo(expectedWidth, 0); // check header and content have same size. const col1Header = grid.getColumnByName('Country').headerCell.nativeElement; @@ -600,8 +600,8 @@ describe('IgxGrid - multi-column headers #grid', () => { fixture.detectChanges(); locationColGroup = getColGroup(grid, 'Location'); - expectedWidth = (200 + grid.calcWidth * 0.7) + 'px'; - expect(locationColGroup.width).toBe(expectedWidth); + expectedWidth = (200 + grid.calcWidth * 0.7); + expect(parseFloat(locationColGroup.width)).toBeCloseTo(expectedWidth, 0); col2Header = grid.getColumnByName('Region').headerCell.nativeElement; cell2 = (grid.gridAPI.get_row_by_index(0).cells as QueryList).toArray()[1].nativeElement; @@ -654,13 +654,13 @@ describe('IgxGrid - multi-column headers #grid', () => { const colWidth = gridWidthInPx / 3; const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); - expect(locationColGroup.width).toBe((colWidth * 3) + 'px'); + expect(parseFloat(locationColGroup.width)).toBeCloseTo((colWidth * 3), 0); const countryColumn = grid.getColumnByName('Country'); - expect(countryColumn.width).toBe(colWidthPx); + expect((parseFloat(countryColumn.width))).toBeCloseTo(colWidth, 0); const regionColumn = grid.getColumnByName('Region'); - expect(regionColumn.width).toBe(colWidthPx); + expect(parseFloat(regionColumn.width)).toBeCloseTo(colWidth, 0); const cityColumn = grid.getColumnByName('City'); - expect(cityColumn.width).toBe(colWidthPx); + expect((parseFloat(cityColumn.width))).toBeCloseTo(colWidth, 0); }); it('Width should be correct. Column group with three columns. Column width in px.', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts index b9ba2d1ae66..8cbacca04c8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts @@ -2068,7 +2068,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { expect(lastCell.active).toBe(true); expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(800); let diff = lastCell.nativeElement.getBoundingClientRect().right - grid.tbody.nativeElement.getBoundingClientRect().right; - expect(diff).toBe(0); + expect(Math.ceil(diff)).toBe(0); // ctrl+arrow left GridFunctions.simulateGridContentKeydown(fix, 'ArrowLeft', false, false, true); @@ -2581,7 +2581,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { // check if cell right edge is visible diff = cell.nativeElement.getBoundingClientRect().right - grid.tbody.nativeElement.getBoundingClientRect().right; await wait(); - expect(diff).toBe(0); + expect(Math.ceil(diff)).toBe(0); // navigate left to cell in column that is in DOM but is not in view col = grid.getColumnByName('CompanyName'); @@ -2614,7 +2614,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(250); // check if cell right right is visible diff = cell.nativeElement.getBoundingClientRect().right - grid.tbody.nativeElement.getBoundingClientRect().right; - expect(diff).toBe(0); + expect(Math.ceil(diff)).toBe(0); }); }); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 900ac1c9572..0b9a71258fb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -34,7 +34,7 @@
+ [style.height.px]="totalHeight" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { { expect(lastCell.column.field).toBe('Address'); expect(lastCell.column.parent.field).toBe('group4'); expect(lastCell.nativeElement.getBoundingClientRect().right) - .toEqual(grid.tbody.nativeElement.getBoundingClientRect().right); + .toBeCloseTo(grid.tbody.nativeElement.getBoundingClientRect().right, 0); }); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 962169bcf4d..46b2f313cd1 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -20,7 +20,7 @@
+ [style.height.px]="totalHeight" #tbody (scroll)="preventContainerScroll($event)"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { { UIInteractions.simulateClickAndSelectEvent(row.expander); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; - expect(childGrid.calcWidth - 370 - childGrid.scrollSize).toBeLessThanOrEqual(5); + // child should be parent width - the child grid indentations + var indents = window.getComputedStyle(fixture.debugElement.queryAll(By.css('.igx-grid__hierarchical-indent'))[0].nativeElement); + expect(childGrid.calcWidth).toBe(parseFloat(hierarchicalGrid.width) - parseFloat(indents.marginLeft) - parseFloat(indents.marginRight)); hierarchicalGrid.clearFilter(); // Required to recalculate and reflect child grid size diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html index 62502e28a2a..16f48ce389a 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html @@ -22,7 +22,7 @@
+ [style.height.px]="totalHeight" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index b4fea8db86b..d77dfc4a18a 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -2517,4 +2517,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.regroupTrigger++; } } + + protected override getUnpinnedWidth(takeHidden = false) { + return this.isPercentWidth ? + this.calcWidth : + super.getUnpinnedWidth(takeHidden); + } } 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 b238803b861..6218b134207 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 @@ -1,6 +1,6 @@ -
-
-
+
+
+
@if (grid.pivotUI.showConfiguration) {
-
-
+
@if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 5983eb81ffa..c188ff237b4 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -19,7 +19,7 @@
+ [style.height.px]='totalHeight' #tbody (scroll)='preventContainerScroll($event)'> @if (moving && columnInDrag && pinnedColumns.length <= 0) {