Mat Form Field Angular: How to maintain the original font size when the form-field is focused?

Asked

Viewed 571 times

2

I’m using Angular Material form field with input. When I click on my form field, my label has the font-size decreased.

How can I maintain my label’s original size when the form field has focus?

I found the class responsible for raising the label and decreasing its size:

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(0.75);
}

If I put scale(1.00) my font remains with the original size, however my border is collapsed as image:

enter image description here

css angular-material

  • You will need to increase the size of the mat-form-field-outline-gap within the mat-form-field-outline-thick, if you look, it has a fixed width, it should be according to the size of the text, you need to overwrite that fixed width according to the size of the label, by default it is calculated to fit the label with Scale

  • @Andrémonteiro yes, the problem is that you can not put a fixed width because each field has a specific size. I got a workaround, I’ll post as I did soon

  • 1

    It’s I thought in a gambiarra, when loading the page, picks up the size of the Labels and set that fixed width, because what the form does today is this, but calculating according to the Scale

  • I understand, mine was also a "gambiarra" but made through css, it suits me better because I will use the input this way in several different components. I will post soon in case anyone needs it. It’s a pity that the angular design material does not propose a way to circumvent the font-size of the label.

1 answer

1


For those who need it, I got an outline solution.

My goal
Maintain the font-size: 14px of label whether or not with Focus.

The problem
The component Material Form Field follows the specification of Material Design, where it indicates that the label size should be reduced when entering the high position. How the gap is programmatically calculated through javascript (see code responsible for gap calculation), by changing the scale to have the original font size, the border collapses with the label, as shown in the question.

Contouring solution

Sets the font size of the mat-form-field to the desired size:

mat-form-field {
  font-size: 14px!important;
}

Denies the size calculated by the library to occupy the entire top edge:

.mat-form-field-outline-gap {
   width: 0!important;
}

Overwrite the class that decreases the font size when floating, indicating that now the font should be the same size when lifting and perform position adjustments on the function translateY():

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
  transform: translateY(-1.7em) scale(1)!important;
}

Defines a background-color for the mat-label as well as a spacing between the sides, making it responsible for breaking the "gap" defined by the library:

mat-form-field mat-label  {
  background-color: #f9f9f9;
  padding-right: 3px;
  padding-left: 3px;
}

Results

inserir a descrição da imagem aqui
inserir a descrição da imagem aqui

Browser other questions tagged css angular-material

You are not signed in. Login or sign up in order to post.