fix(grid): prevent collapsible column group header from being inflated by minColumnWidth (#17042)#17048
Open
ivanvpetrov wants to merge 3 commits intomasterfrom
Open
Conversation
Column groups (IgxColumnGroupComponent) compute their width as the sum of their visible children's calcWidth. However, the minColumnWidth constraint added in PR #16636 was incorrectly applying to non-layout column groups because their widthSetByUser is always false (the set width() setter is a no-op override). When a visible collapsed child had an explicit width smaller than the grid's minColumnWidth (136px), getConstrainedSizePx() inflated the group header width to 136px while the cell stayed at the child's explicit width, causing a visible header/cell misalignment when scrolling horizontally. Fix: update condition 3 of getConstrainedSizePx() from '!this.columnGroup' to '(this.columnLayout || !this.columnGroup)', so the minColumnWidth floor applies to: - leaf columns (columnGroup = false) - MRL column layouts (columnLayout = true, columnGroup = true) but is skipped for regular non-layout column groups (columnGroup = true, columnLayout = false), which derive their width purely from children. Closes #17042
Agent added by mistake
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes a grid sizing regression where collapsed collapsible column group headers could become wider than their visible child columns when those children have explicit widths below the grid’s minColumnWidth, leading to header/cell misalignment during horizontal scrolling.
Changes:
- Adjusts
IgxColumnComponent.getConstrainedSizePx()to skip applying theminColumnWidthfloor for regular column groups while preserving the behavior for leaf columns and MRL column layouts. - Adds a dedicated test component sample to reproduce the scenario (collapsed group + explicit 100px child widths).
- Adds a regression spec asserting the column group
calcPixelWidthmatches the visible child column width when collapsed.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| projects/igniteui-angular/test-utils/grid-samples.spec.ts | Adds a new test component fixture for the collapsed column group + explicit small-width columns scenario. |
| projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts | Adds a regression test validating group/child width alignment in the collapsed + explicit widths case. |
| projects/igniteui-angular/grids/core/src/columns/column.component.ts | Updates the constraint condition so minColumnWidth isn’t incorrectly enforced for regular column groups. |
You can also share your feedback on Copilot code review. Take the survey.
| expect(colGroup.collapsible).toBeTrue(); | ||
| expect(colGroup.expanded).toBeFalse(); | ||
|
|
||
| // The visible child has explicit width 100px, which is less than the grid's MINIMUM_COLUMN_WIDTH (136px). |
Comment on lines
2684
to
2686
| return this.userSetMinWidthPx; | ||
| } else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) { | ||
| } else if ((this.columnLayout || !this.columnGroup) && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) { | ||
| return this.grid.minColumnWidth; |
MayaKirova
requested changes
Mar 16, 2026
| this.widthConstrained = true; | ||
| return this.userSetMinWidthPx; | ||
| } else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) { | ||
| } else if ((this.columnLayout || !this.columnGroup) && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) { |
Contributor
There was a problem hiding this comment.
Not sure why the AI agent decided that the MRL (column layout) scenario should be included here as the same issue where the widths don't match happens with a igx-column-layout, where the sum of the child column widths is less than the minColumnWidth.
Constraint should be skipped for both IMO as their width is the sum of the child columns, where the children themselves already apply the constraint.
Suggested change
| } else if ((this.columnLayout || !this.columnGroup) && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) { | |
| } else if (!this.columnGroup && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TEST Bug fix PR entirely undertaken by bug-fixer custom agent (PR #17047 )
Closes #17042
Problem
After PR #16636,
IgxGridheaders and cells become misaligned when acollapsiblecolumn group is used and child columns have explicit widths smaller thanMINIMUM_COLUMN_WIDTH(136px).Steps to reproduce:
Scroll horizontally — the Info group header is 36px wider than the ID cell beneath it.
Root Cause
IgxColumnGroupComponentoverridesset width(val) {}as a no-op — width is computed dynamically from children — which meanswidthSetByUseris always false. Condition 3 added by PR #16636 ingetConstrainedSizePx()checked!this.widthSetByUseras part of its guard. Since this is always true for column groups, the constraint fired and inflated the group header tominColumnWidth(136px) even when children had smaller explicit widths.Fix
Changed condition 3 in
getConstrainedSizePx()incolumn.component.tsfrom:
to:
This ensures the
minColumnWidthfloor:✅ Still applies to leaf columns (
columnGroup = false)✅ Still applies to MRL column layouts (
columnLayout = true), which inheritscolumnGroup = trueviaIgxColumnGroupComponent)❌ Is skipped for regular column groups (
columnGroup = true),columnLayout = false), which derive their width purely from their children's computed widthsPotential Side Effects
None expected. The
columnLayoutguard was added specifically to preserve the unchanged behavior for MRL (IgxColumnLayoutComponent), which inheritscolumnGroup = trueand would otherwise have been inadvertently excluded from the constraint. All 1908 grid tests pass.How to Test
Create a grid with a collapsible column group where child columns have explicit
widthvalues smaller than 136px (e.g.,width="100px") Setexpanded]="false"on the group so only one child is visibleScroll right — the group header should now align with the cell beneath it
Run
npm run test:lib:grid— all tests should pass with no regressions