angular / angular/components

Paginator: options list visually inconsistent for legacy and standard appearance

Ouverte
#13,907 6 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: material/paginator P4
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

Recevez les nouvelles issues par e-mail

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