angular / angular/components

Paginator: options list visually inconsistent for legacy and standard appearance

Open
#13,907 6 comments 2 reactions 0 assignees View on GitHub
area: material/paginator P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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?
--

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially material-module.ts line 48, and switch MatFormFieldDefaultOptions between legacy and standard. Compare the paginator options value with its arrow and trace the paginator select styling used by the reproduction. Done means the value is vertically aligned with the arrow under standard appearance without breaking legacy appearance.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.