angular / angular/components

bug(MatSelectionList): Spacing too large between checkbox / radio when set to togglePosition="before"

Ouverte
#27,775 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/list 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

15

### Description

Using a `` component, and setting the options with `` results in too much space between the toggle and the content. According to [the Material spec](https://m3.material.io/components/lists/specs#ff521a61-bab9-4e75-bded-dee94fd31f61) for lists, the spacing between toggle and content should be 16px. Currently its about 35px all in.

Screenshot from stackblitz:
![image](https://github.com/angular/components/assets/8093223/c0e21709-ba3e-46df-bbfa-c42fa3906cec)

Screenshot from the Material spec:
![image](https://github.com/angular/components/assets/8093223/622866bf-c97c-4639-bf56-b089fdee30f5)

### Reproduction

StackBlitz link: https://stackblitz.com/edit/v9ccty?file=src%2Fapp%2Flist-selection-example.html

### Expected Behavior

There should be a total of 16px of space between the toggle and the content.

### Actual Behavior

There is approximately 35px of space between the toggle and the content.

### Environment

Angular CLI: 16.2.0
Node: 18.14.0
Package Manager: yarn 3.2.0
OS: darwin arm64

Angular: 16.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package Version
----------------------------------------------------------
@angular-devkit/architect 0.1602.0
@angular-devkit/build-angular 16.2.0
@angular-devkit/core 16.2.0
@angular-devkit/schematics 16.2.0
@angular-devkit/schematics-cli 16.2.0
@angular/flex-layout 15.0.0-beta.42
@schematics/angular 16.2.0
ng-packagr 16.2.0
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.1

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée, en particulier src/app/list-selection-example.html, et examinez le comportement de mat-selection-list lorsque togglePosition="before". Comparez l’espacement rendu avec la Material list specification. La tâche est terminée lorsque l’espacement entre le toggle et le contenu est de 16px sans régression de la mise en page de selection-list.

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

Évaluation

Stack technique
angular
Domaine
design, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

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