From e658769c5856305aa7a11937121c32e7a32869d1 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Feb 2026 14:30:41 +0200 Subject: [PATCH 1/4] fix(Grid): Add border to rendered height calc. --- .../grids/grid/src/grid-base.directive.ts | 8 ++++++-- src/app/grid-auto-size/grid-auto-size.sample.scss | 5 +++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index a84a12c0d17..9e9197d8578 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7234,20 +7234,24 @@ export abstract class IgxGridBaseDirective implements GridType, if (!this._height) { return null; } + const styles = this.document.defaultView.getComputedStyle(this.nativeElement); 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 borderTop = parseFloat(styles.getPropertyValue('border-top')); + const borderBottom = parseFloat(styles.getPropertyValue('border-bottom')); + const renderedHeight = toolbarHeight + actualTheadRow + footerHeight + pagingHeight + groupAreaHeight + - scrHeight; + scrHeight + borderTop + borderBottom; let gridHeight = 0; if (this.isPercentHeight) { - const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('height'); + const computed = styles.getPropertyValue('height'); const autoSize = this._shouldAutoSize(renderedHeight); if (autoSize || computed.indexOf('%') !== -1) { const bodyHeight = this.getDataBasedBodyHeight(); diff --git a/src/app/grid-auto-size/grid-auto-size.sample.scss b/src/app/grid-auto-size/grid-auto-size.sample.scss index 5e9b37fd2f3..ba31d96c318 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.scss +++ b/src/app/grid-auto-size/grid-auto-size.sample.scss @@ -11,3 +11,8 @@ margin-bottom: 16px; max-width: 900px; } + + +igx-grid { + border: 1px solid lightgray; + } From 833d6f4078109ca336632fd0296b498f596fa2d7 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Feb 2026 14:49:03 +0200 Subject: [PATCH 2/4] chore(*): Fallback in case of no border. --- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 9e9197d8578..0743e6ca9f2 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7241,8 +7241,8 @@ export abstract class IgxGridBaseDirective implements GridType, const pagingHeight = this.getPagingFooterHeight(); const groupAreaHeight = this.getGroupAreaHeight(); const scrHeight = this.getComputedHeight(this.scr.nativeElement); - const borderTop = parseFloat(styles.getPropertyValue('border-top')); - const borderBottom = parseFloat(styles.getPropertyValue('border-bottom')); + const borderTop = parseFloat(styles.getPropertyValue('border-top')) || 0; + const borderBottom = parseFloat(styles.getPropertyValue('border-bottom')) || 0; const renderedHeight = toolbarHeight + actualTheadRow + footerHeight + pagingHeight + groupAreaHeight + From 0f7523ca3709f4e3b30b622f98ed0bb47b490a64 Mon Sep 17 00:00:00 2001 From: Maya Date: Fri, 3 Apr 2026 15:22:57 +0300 Subject: [PATCH 3/4] chore(*): Apply suggestions from code review --- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 4 ++-- src/app/grid-auto-size/grid-auto-size.sample.scss | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 0743e6ca9f2..801efe8c04f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7241,8 +7241,8 @@ export abstract class IgxGridBaseDirective implements GridType, const pagingHeight = this.getPagingFooterHeight(); const groupAreaHeight = this.getGroupAreaHeight(); const scrHeight = this.getComputedHeight(this.scr.nativeElement); - const borderTop = parseFloat(styles.getPropertyValue('border-top')) || 0; - const borderBottom = parseFloat(styles.getPropertyValue('border-bottom')) || 0; + const borderTop = parseFloat(styles.getPropertyValue('border-top-width')) || 0; + const borderBottom = parseFloat(styles.getPropertyValue('border-bottom-width')) || 0; const renderedHeight = toolbarHeight + actualTheadRow + footerHeight + pagingHeight + groupAreaHeight + diff --git a/src/app/grid-auto-size/grid-auto-size.sample.scss b/src/app/grid-auto-size/grid-auto-size.sample.scss index ba31d96c318..381adfb8f86 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.scss +++ b/src/app/grid-auto-size/grid-auto-size.sample.scss @@ -12,7 +12,6 @@ max-width: 900px; } - igx-grid { border: 1px solid lightgray; - } +} From 50972ccc40cb14176ef2a29ca0a91ca46abdf9ad Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 9 Apr 2026 08:21:24 +0000 Subject: [PATCH 4/4] test(grid): add unit test #16640 --- .../grids/grid/src/grid.component.spec.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 3dbf7acad9b..2ccd8f07ee0 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -1307,6 +1307,30 @@ describe('IgxGrid Component Tests #grid', () => { expect(parseInt(window.getComputedStyle(domGrid).height, 10)).toBe(300); })); + it('should account for CSS border widths in body height calculation when height is percent #16640', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridWrappedInContComponent); + fix.componentInstance.outerHeight = 600; + fix.componentInstance.data = fix.componentInstance.fullData; + tick(); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + const calcHeightNoBorder = grid.calcHeight; + expect(calcHeightNoBorder).not.toBeNull(); + + // Apply a 2px border (top and bottom) to the grid's native element + grid.nativeElement.style.borderTop = '2px solid black'; + grid.nativeElement.style.borderBottom = '2px solid black'; + + // Trigger height recalculation + grid.reflow(); + fix.detectChanges(); + + // The fix ensures border widths are included in the rendered height calculation, + // reducing the available body height accordingly and preventing continuous reflow growth + expect(grid.calcHeight).toBe(calcHeightNoBorder - 4); + })); + it('should keep auto-sizing if initial data is empty then set to a new array', fakeAsync(() => { const fix = TestBed.createComponent(IgxGridWrappedInContComponent); tick();