angular / angular/components

bug(MatTable): Vertical languages rotated and sticky columns

Ouverte
#30,542 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: material/table P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

18

### Description

When there are multiple sticky columns and a column has the `writing-mode: vertical-lr` CSS rule applied (and assuming it is not the _last_ sticky column), the table does not calculate the width of the column correctly. It uses the default `horizontal-tb` mode to calculate the width and uses that instead, causing subsequent sticky columns to overlap with non-sticky columns and creates a blank space between the column with the `vertical-lr` rule and the next sticky column.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-6mfsadjh?file=src%2Fmain.ts,package.json
Steps to reproduce:
1. First two columns are sticky
2. One non-sticky column has `width: 100%` to force column compression

### Expected Behavior

The second column should have a `left` value that matches the width of the first column.

### Actual Behavior

The second column uses unrotated column width as its `left` value

![Image](https://github.com/user-attachments/assets/aeff30fd-dec3-4aa3-b40b-4fba4534d0a3)

### Environment

- Angular: 19
- CDK/Material: 19
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et comparez les deux premières colonnes sticky lorsque la colonne sticky qui n’est pas la dernière utilise writing-mode: vertical-lr. Vérifiez la valeur de left de la deuxième colonne par rapport à la largeur rendue de la première colonne ; le travail est terminé lorsque les valeurs correspondent sans chevauchement ni espace vide dans le tableau reproduit.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.