Bug in table.scss footer cell height: unset instead of footer row height unset

Open Beginner friendly
#33,709 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
angular, scss
Domain
frontend

Research direction

Open src/material/table/table.scss around line 158 and compare the footer selector with the reported expected behavior. Run the linked StackBlitz reproduction or the listed npm run start steps, then verify that the footer row rather than a footer cell has an unset height and the affected tables no longer break.

Written by the indexing model from the issue text.

Description

area: material/table gemini-triaged P4
Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

// Flex rows should not set a definite height, but instead stretch to the height of their // children. Otherwise, the cells grow larger than the row and the layout breaks. .mat-mdc-table mat-header-row.mat-mdc-header-row, .mat-mdc-table mat-row.mat-mdc-row, .mat-mdc-table mat-footer-row.mat-mdc-footer-cell { height: unset; }
https://github.com/angular/components/blob/main/src/material/table/table.scss#L158

Is mat-mdc-footer-cell intentional?
I feel it must be mat-mdc-footer-row not `cell

Reproduction

StackBlitz link: https://stackblitz.com/edit/ydyoaqxm
Steps to reproduce:

  1. npm run start
  2. check 1 and 2 tables (wrong). check 3rd table fixed by tokens (okay)
Expected Behavior

mat-mdc-footer-row height unset

Actual Behavior

mat-mdc-footer-cell height unset

Environment
  • Angular: v18.2.4
  • CDK/Material: v18.2.4
  • Browser(s): 151.0.7922.172
  • Operating System (e.g. Windows, macOS, Ubuntu): windows
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 2h
Merged PRs (30d)
81

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/components

All issues in angular/components

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.