From 822d8cd9af6593082c86a316e2196a8a5cad774a Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Feb 2026 14:30:41 +0200 Subject: [PATCH 1/2] fix(Grid): Add border to rendered height calc. --- .../igniteui-angular/src/lib/grids/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/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index b53f567bd2a..a4ba11e4645 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -7259,20 +7259,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 d88b8110a038500c3bfa08447615145072371a5a Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Feb 2026 14:49:03 +0200 Subject: [PATCH 2/2] chore(*): Fallback in case of no border. --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 a4ba11e4645..f5641ec0ce5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -7266,8 +7266,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 +