Paginator: options list visually inconsistent for legacy and standard appearance
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### Bug, feature request, or proposal:
When defining globally the appearance of the app form-fields as `standard` (via `MatFormFieldDefaultOptions`), the paginator options list value is not vertically aligned with its arrow.
When using `legacy`, (visually) everything works as expected.
On a regular `mat-form-field`, this inconsistency isn't as noticeable, probably because the font size is larger than the one used on the paginator.
#### What is the expected behavior?
Paginator options (select element) should have its value aligned with the arrow, when using `standard` appearance.
#### What is the current behavior?
Paginator options' (select element) value is not vertically aligned with the arrow.
#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-cqtqvd-zwpq9y?file=material-module.ts
On the `material-module.ts` file, go to line 48 and switch the property value between 'legacy' and 'standard'.
#### What is the use-case or motivation for changing an existing behavior?
Visual inconsistency when using the 'standard' appearance.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Only noticed on Angular 7 and Material 7.0.2, but this could probably affect previous versions.
#### Is there anything else we should know?
--
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz liée, en particulier material-module.ts ligne 48, et basculez MatFormFieldDefaultOptions entre legacy et standard. Comparez la valeur des options du paginator avec sa flèche et suivez le style du select du paginator utilisé par la reproduction. C’est terminé lorsque la valeur est alignée verticalement avec la flèche sous l’apparence standard sans casser l’apparence legacy.
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é
- Plutôt claire
- Accessibilité débutants
- 35/100