CODEWITHSUNDEEP
angularmaterial-designangular-material
serlingpa
serlingpa

Reputation: 12660

Angular Material: changing font size of input clips text

I am modifying the font size of my Angular Material inputs to 28px, but this is causing the descenders of some characters to be clipped, like the 'g' in this example:

enter image description here

Can't for the life of me work out how to solve this. Any ideas anyone? Which classes do I need to augment?

I modified my component in SCSS like this:

input {
  font-size: 28px;
}

Upvotes: 4

Views: 26401

Answers (2)

Wlada
Wlada

Reputation: 1102

When you use material theme it's possible with material to define typography

$typography: mat-typography-config(
  $input: mat-typography-level(14px, 1.125, 400),
);
@include mat-core($typography);

Upvotes: 4

G. Tranter
G. Tranter

Reputation: 17908

If you want to change font-size for mat-form-field, you should apply the style to the mat-form-field element, not the input element. If you don't, certain parts of the form field may not respond properly (style wise). You should also make sure you set line-height appropriately for the same reason.

If you plan to adhere to material design, then you should be using the utilities and creating your style using theming/typography with mat-typography-level-to-styles and one of the Material Design specified typography levels. This should be done with the typography utilities but you can do it manually. See https://material.angular.io/guide/typography for details.

For example, 24px is the font size for what Angular Material calls headline (H5 in material design - not an H5 element) so your style should implement the appropriate headline specification (according to Angular Material's implementation of H5):

.input-headline {
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
}

Angular Material has convenience style classes that do this for you. For headline it is mat-headline so you could easily just do:

<mat-form-field class="mat-headline">

Note that 28px is not a material design specified font level: https://material.io/design/typography/the-type-system.html#type-scale.

Upvotes: 15

Related Questions