angular / angular/components

Paginator: options list visually inconsistent for legacy and standard appearance

Abierto
#13,907 6 comentarios 2 reacciones 0 asignados Ver en GitHub
area: material/paginator P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### 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?
--

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz, especialmente con material-module.ts línea 48, y cambia MatFormFieldDefaultOptions entre legacy y standard. Compara el valor de las opciones del paginator con su flecha y rastrea el estilo del select del paginator utilizado por la reproducción. La tarea está terminada cuando el valor queda alineado verticalmente con la flecha bajo la apariencia standard sin romper la apariencia legacy.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.