-
Notifications
You must be signed in to change notification settings - Fork 664
DataGrid: group and total summary overlapping #32211
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 26_1
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR fixes overlapping issues between group rows and total summary in DataGrid by adjusting background-color properties for sticky columns across all themes.
Changes:
- Changed
background-color: transparenttobackground-color: inheritfor sticky columns in group rows across all three themes (material, generic, fluent) - Inverted the CSS selector logic in the base gridBase file for total footer to apply
background-color: transparentto non-sticky columns instead of sticky columns
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/devextreme-scss/scss/widgets/material/dataGrid/_index.scss | Changed sticky group cell background from transparent to inherit |
| packages/devextreme-scss/scss/widgets/generic/dataGrid/_index.scss | Changed sticky group cell background from transparent to inherit |
| packages/devextreme-scss/scss/widgets/fluent/dataGrid/_index.scss | Changed sticky group cell background from transparent to inherit |
| packages/devextreme-scss/scss/widgets/base/_gridBase.scss | Inverted selector to apply transparent background to non-sticky columns in total footer |
|
|
||
| .dx-#{$widget-name}-total-footer { | ||
| .dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-sticky-column-left, .dx-#{$widget-name}-sticky-column-right { | ||
| td:not(.dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-sticky-column-left, .dx-#{$widget-name}-sticky-column-right) { |
Copilot
AI
Jan 15, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The CSS :not() pseudo-class with multiple selectors separated by commas is not supported in older browsers and will only match elements that don't match ANY of the listed selectors (rather than all of them). This should use separate :not() pseudo-classes chained together: td:not(.dx-#{$widget-name}-sticky-column):not(.dx-#{$widget-name}-sticky-column-left):not(.dx-#{$widget-name}-sticky-column-right)
| td:not(.dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-sticky-column-left, .dx-#{$widget-name}-sticky-column-right) { | |
| td:not(.dx-#{$widget-name}-sticky-column):not(.dx-#{$widget-name}-sticky-column-left):not(.dx-#{$widget-name}-sticky-column-right) { |
9bd12d2 to
101dd1e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.
No description provided.