question-mark
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.

mat-select and mat-autocomplete options have different font sizes with custom typography

See original GitHub issue

What is the expected behavior?

mat-select and mat-autocomplete options should have the same font size (and consequently same height), when a custom $input value is set via the mat-typography-config() function.

What is the current behavior?

When setting a custom $input value with the mat-typography-config(), mat-select options change their font-size accordingly, but the mat-autocomplete options ignore it, and use 16px instead (default).

What are the steps to reproduce?

https://stackblitz.com/edit/angular-nzfhqa?file=theme-styles.scss On theme-styles.scss file, try commenting line 4, to use theme default values, or switch the mat-typography-level function first argument to any another value (other than 16px), and observe the changes on the mat-select and mat-autocomplete options font size.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Currently testing on Angular 7.2.1 and Material 7.2.1.

Is there anything else we should know?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
nuno-mcommented, Oct 2, 2019

@TheBeardedLlama no, I have not. I even forked my example and update the dependencies for Angular Material 8, and this behavior still persists. I don’t think there’s much we can do from the outside.

0reactions
angular-automatic-lock-bot[bot]commented, Nov 27, 2022

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular material2 autocomplete option row size - Stack Overflow
It sorta works, but the background and fonts get cut off, reducing the font size puts the background highlight offset between the lines....
Read more >
Customizing Typography - Angular Material
Angular Material's typography APIs lets you specify any font-face. ... The easiest way to load Roboto, or any other custom font, is by...
Read more >
Easy Angular Testing – UI Elements – Input, Form Field and ...
In this post, we'll look into several components – Material Input, Mat Form Field and Autocomplete. We also take a peek at form...
Read more >
mat select search angular material - You.com
<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...> DEMO. Open side panel. Angular ngx-mat-select-search Custom Component.
Read more >
angular/material/_theming.scss - UNPKG
203, // If the selector context has multiple parts, such as `.section, .region`, ... 2035, // Gets the font size for a level...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found