Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Paginator: options list visually inconsistent for legacy and standard appearance

See original GitHub issue

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?

–

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

nuno-mcommented, Jan 19, 2019

@crisbeto, @mmalerba and @josephperrott :

I’m not sure if I should open a new issue for this (because they might be related), but I’ll share it here and await for further instructions.

I was just testing the latest version (7.2.1) and I noticed that if I set global appearance options for form fields (via MatFormFieldDefaultOptions), there are still visual inconsistencies, concerning its vertical alignment.

'legacy' appearance: everything is OK 'standard' appearance: page size options are below the vertical center line 'fill' appearance: page size options arrow is too high (since this select element will never have a label) 'outline' appearance: previous/next arrows are below the vertical center line

Please check the following link, and play with the options on material.module.ts, line 49 https://stackblitz.com/edit/angular-yakttk?file=material-module.ts

0reactions

flensrockercommented, Oct 21, 2019

Should it also have an option to set the appearance of the internal form-field?

That would be fine - and maybe an option to place the label inside the form-field.

Top Results From Across the Web

ACF 6.0 Release – A Fresh New UI, Block Improvements ...

This release includes a new plugin UI refresh for both ACF 6.0 and ACF PRO 6.0, pagination for repeater fields with large amounts...

Pagination – Examples And Good Practices

Let's take a look at the good practices of pagination design as well as some examples of ... Mistake #1: Navigation Options Are...

How to Use & Customize the LearnDash Course Grid

These only work with the legacy course grid output (1.x), using the [ld_course_list] shortcode for “LearnDash Course List” block.

All other San Diego fixes - Product Documentation | ServiceNow

No support for multi-factor authentication on query parameters to redirect ... Unable to list edit records if read ACLs have conditions.

@angular/material | Yarn - Package Manager

2686bfef39, fix, list: visually indicate active links in HCM (#25679) ... bug fix, form-field: undeprecated legacy and standard appearances (#18144 (9ea5694).