fix(Grid): Add border to rendered height calc.#16906
Conversation
|
@MayaKirova please add a pr for 21.1.x |
There was a problem hiding this comment.
Pull request overview
Fixes an IgxGrid auto-sizing bug where applying a CSS border (with width/height: 100%) could lead to incorrect rendered height calculations and continuous growth.
Changes:
- Updates the grid body height calculation to include the host element’s top/bottom border widths.
- Avoids duplicate
getComputedStyle(...)calls by caching computed styles. - Updates the auto-size sample styling to apply a border to
igx-grid(repro for the issue).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/app/grid-auto-size/grid-auto-size.sample.scss | Adds a border style to the sample grid to reproduce/validate the fix visually. |
| projects/igniteui-angular/grids/grid/src/grid-base.directive.ts | Includes border widths in rendered height calculation to prevent incorrect percent-height sizing behavior. |
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
Outdated
Show resolved
Hide resolved
|
@MayaKirova , could you please resolve the copilot comments and open a pr to 21.1.x too? (think it's missing for this bugfix) |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Missing unit test about the fix, covering the scenario, it was commented here as well - #17157 (comment) |
Since this is a rather edge case scenario I didn't feel the need to add a test. But since you insist @copilot add a test for this scenario. |
… with percent height #16640 Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/e7e33240-acb0-4254-a7c2-186b9168a9f2 Co-authored-by: MayaKirova <10397980+MayaKirova@users.noreply.github.com>
Added a unit test in commit 3f2f189 that covers the regression scenario: a grid with Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Closes #16640
When a grid uses
height: 100%inside a fixed-height container and has a CSS border applied, the body height calculation was not accounting for the border widths, causing the rendered height to exceed the container and triggering a continuous reflow/growth loop.Changes
grid.component.spec.ts): Verifies that applying a top/bottom border to the grid element correctly reducescalcHeightby the combined border width (e.g. 2px top + 2px bottom →calcHeightdecreases by 4px), confirming the fix prevents the reflow loop.