From d3e1911f187fcc785821f520aeef672b247ad775 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. --- .../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 508dbbf873c..6b86a65e19a 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7223,20 +7223,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 4a1f99cdc359743d3fd6568c44695d5b4ac1b806 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/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 6b86a65e19a..5c1c5e7becf 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7230,8 +7230,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 +