CODEWITHSUNDEEP
angularangular-material
Nicu
Nicu

Reputation: 3536

Angular material input font size changes if it's inside a mat-card-content

I have an issue using @angular/material <mat-card-content/> and input since the matInput has font-size: inherit when I place it inside <mat-card-content/> the font size of the input changes to 14px when is outside of this component is 16px here is an exaple. Is this intended or it's a bug ? Here is an example

Upvotes: 2

Views: 1506

Answers (1)

G. Tranter
G. Tranter

Reputation: 17938

It is generally expected that you apply .mat-typography to your application's outer most element or the page body in order to implement the correct font size, weight, etc. for various elements including standard HTML elements like <p> and <div>. If you do this, the default font size becomes 14px so it will match .mat-card-content.

I logged this as a bug years ago but they ignored it. At the time, Material Design specifications had a fixed font size for inputs (14px) but the Angular Material people still thought it was best to implement it with size as inherit. It can cause a lot of issues even when you use .mat-typography if you want to use inputs in places other than typical forms such as on a toolbar. IMO they really goofed with this.

Upvotes: 1

Related Questions