Skip to content

fix(Grid): Add border to rendered height calc.#16906

Merged
dkamburov merged 7 commits intomasterfrom
mkirova/fix-border-calc
Apr 9, 2026
Merged

fix(Grid): Add border to rendered height calc.#16906
dkamburov merged 7 commits intomasterfrom
mkirova/fix-border-calc

Conversation

@MayaKirova
Copy link
Copy Markdown
Contributor

@MayaKirova MayaKirova commented Feb 16, 2026

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

  • Unit test (grid.component.spec.ts): Verifies that applying a top/bottom border to the grid element correctly reduces calcHeight by the combined border width (e.g. 2px top + 2px bottom → calcHeight decreases by 4px), confirming the fix prevents the reflow loop.
// 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';

grid.reflow();
fix.detectChanges();

// Border widths must be subtracted from available body height
expect(grid.calcHeight).toBe(calcHeightNoBorder - 4);

IMinchev64
IMinchev64 previously approved these changes Feb 19, 2026
@dkamburov
Copy link
Copy Markdown
Contributor

@MayaKirova please add a pr for 21.1.x

Copilot AI review requested due to automatic review settings April 2, 2026 15:32
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@dkamburov dkamburov added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Apr 2, 2026
@ChronosSF
Copy link
Copy Markdown
Member

@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>
@MayaKirova MayaKirova added ❌ status: awaiting-test PRs awaiting manual verification and removed ✅ status: verified Applies to PRs that have passed manual verification labels Apr 3, 2026
@mddragnev mddragnev added 💥 status: in-test PRs currently being tested ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification 💥 status: in-test PRs currently being tested labels Apr 8, 2026
dkamburov
dkamburov previously approved these changes Apr 8, 2026
@dkamburov dkamburov self-requested a review April 8, 2026 13:26
@dkamburov
Copy link
Copy Markdown
Contributor

Missing unit test about the fix, covering the scenario, it was commented here as well - #17157 (comment)

@dkamburov dkamburov dismissed their stale review April 8, 2026 13:37

needs unit test as well

@MayaKirova
Copy link
Copy Markdown
Contributor Author

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>
Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 9, 2026

Missing unit test about the fix, covering the scenario, it was commented here as well - #17157 (comment)

Since th...

Added a unit test in commit 3f2f189 that covers the regression scenario: a grid with height: 100% inside a fixed-height container gets a 2px top/bottom border applied, then reflow() is called, and we assert that calcHeight is reduced by exactly 4px (2px top + 2px bottom). This verifies the fix correctly accounts for border widths in the body height calculation, preventing continuous reflow growth.

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:

  • accounts.google.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4773 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-55812201 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,13363961494899567523,13452328016807013660,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,5649333799790552755,16908993752998238392,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-61638883 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=61638883 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • android.clients.google.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-61638883 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=61638883 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5086 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-22011374 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,17657148793588238660,14190948371590463512,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,10517022442873008753,2166460610732713794,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • clients2.google.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4773 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-55812201 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,13363961494899567523,13452328016807013660,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,5649333799790552755,16908993752998238392,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-55812201 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=55812201 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • clientservices.googleapis.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4773 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-55812201 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,13363961494899567523,13452328016807013660,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,5649333799790552755,16908993752998238392,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-55812201 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=55812201 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • content-autofill.googleapis.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-61638883 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=61638883 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5086 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-22011374 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,17657148793588238660,14190948371590463512,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,10517022442873008753,2166460610732713794,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • optimizationguide-pa.googleapis.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-61638883 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=61638883 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=5086 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-22011374 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,17657148793588238660,14190948371590463512,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,10517022442873008753,2166460610732713794,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • redirector.gvt1.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4773 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-55812201 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,13363961494899567523,13452328016807013660,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,5649333799790552755,16908993752998238392,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-55812201 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=55812201 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • safebrowsingohttpgateway.googleapis.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4773 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-55812201 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,13363961494899567523,13452328016807013660,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,5649333799790552755,16908993752998238392,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-55812201 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=55812201 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • www.google.com
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4774 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-61638883 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,8805570095601877517,13930131002020418809,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,374722430218868778,14982814446209157902,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4773 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-55812201 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,13363961494899567523,13452328016807013660,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,5649333799790552755,16908993752998238392,4 --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-55812201 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=55812201 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI changed the title fix(Grid): Add border to rendered height calc. test(grid): Add unit test for border-inclusive body height calculation with percent height Apr 9, 2026
@MayaKirova MayaKirova changed the title test(grid): Add unit test for border-inclusive body height calculation with percent height fix(Grid): Add border to rendered height calc. Apr 9, 2026
@dkamburov dkamburov merged commit b1ded1d into master Apr 9, 2026
6 checks passed
@dkamburov dkamburov deleted the mkirova/fix-border-calc branch April 9, 2026 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

grid version: 21.2.x ✅ status: verified Applies to PRs that have passed manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Resizing calculations of IgxGrid with 100% width/height cause infinite grow if the grid has css border applied

7 participants