CODEWITHSUNDEEP
angularangular-materialmaterial-design
Alex A.
Alex A.

Reputation: 2603

Failing to customize form field label size in angular material

We are using angular material in our app. I am trying to find a way to make the floating labels of all fields bigger.

As an examples: enter image description here

I can, of course, just drive it by additional class, but: * I will have to do it on each and every field * In case of an outlined field (as shown), the text will be on top of the border.

How can I make the change globally? and how to make sure that the space for the label text also increased?

Upvotes: 4

Views: 2794

Answers (2)

guacamole
guacamole

Reputation: 325

I handled this by overriding a couple things in a global SCSS/CSS file.

  1. Keep the translateY() value and change the scale to be 1.
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,  
 .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { 
        transform: translateY(-1.7175em) scale(1);
    }
  1. Apply your font changes to the label, and add background to it, which overlaps with the outline and makes it look like there is the desired gap.
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {   
    letter-spacing: 0.025rem;
     line-height: 1.34;
      font: {
        size:  0.75rem;
        weight: 600;
      }
    
          mat-label {
           background: white;

            &::after {
              background: white;
              content: '';
              display: inline-block;
              width: 0.25rem;
            }
          }

Upvotes: 1

Alirizia
Alirizia

Reputation: 26

They are all dominated by the selector of .mat-form-field-label that you can manipulate your self, but it will change all the behaviours of it's translation and scale from label to floating label so it's a little bit complicated if you can not handle modifications of its translation and typography.

Upvotes: 0

Related Questions