fix(Grid): Add border to rendered height calc.#17157
fix(Grid): Add border to rendered height calc.#17157MayaKirova wants to merge 3 commits into21.1.xfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes an IgxGrid auto-sizing/percent-height edge case where applying a CSS border causes repeated rendered-height recalculation and continuous vertical growth by accounting for the grid’s top/bottom border widths in the rendered height calculation.
Changes:
- Include
border-top-widthandborder-bottom-widthin the grid rendered height used for body height calculation. - Reuse a single
getComputedStyle(...)call within the height calculation path. - Update the
grid-auto-sizesample styling to apply a border toigx-grid(to reproduce/verify the scenario).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/app/grid-auto-size/grid-auto-size.sample.scss |
Adds a border to the sample grid to reproduce the reported growth scenario. |
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts |
Adjusts rendered height computation to include border widths and avoids redundant computed-style lookups. |
| 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-width')) || 0; | ||
| const borderBottom = parseFloat(styles.getPropertyValue('border-bottom-width')) || 0; | ||
|
|
||
| const renderedHeight = toolbarHeight + actualTheadRow + | ||
| footerHeight + pagingHeight + groupAreaHeight + | ||
| scrHeight; | ||
| scrHeight + borderTop + borderBottom; |
There was a problem hiding this comment.
This bug fix changes how body height is computed when borders are applied, but there is no unit/integration test covering the reported scenario (grid with percent height/width inside a container + CSS border leading to runaway growth). Please add a spec that renders an IgxGrid with 100% height and a non-zero border and asserts that the calculated body height stabilizes (no repeated size increases across change detection / resize observer cycles).
Closes #16640
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)