Adjust mat-form-field floating label gap

Question

I'm trying to adjust the gap between the floating label and the border next to it.

As you can see below, on the second picture:

There is a wider gap on the right, between the floating label and the border. I want to adjust this so that the gap is even on both sides.

The styles I have so far for the floating label:

mat-form-field span.mat-form-field-label-wrapper label {
    color: white;
    opacity: 0.5;
}

.mat-form-field-label-wrapper {
    transform: translate(1.3em, -0.3rem);
}

.mat-form-field.mat-focused .mat-form-field-label {
    font-size: 0.75rem;
    color: white;
    opacity: 1;
}

I tried messing around with margin-right and translate to the right but nothing seems to work... that gap persists.

Is there any way I can do this?

Thank you in advance.

You need to update your question with the code that you have tried so far to get that result. — m4n0, May 12 '21 at 11:38

score 1 · Accepted Answer · answered May 12 '21 at 13:52

1

The element that you want to adjust is a div with class mat-form-field-outline-gap. The issue is that it has a static width that is dynamically generated based on the label text.

A way around this could be to set a negative margin for the mat-form-field-outline-gap class:

.mat-form-field-outline-gap {
  margin-right: -6px;
}

https://stackblitz.com/angular/lmgyydoebpro?file=src%2Fstyles.scss

answered May 12 '21 at 13:52

robbieAreBest

1,601
14
16

1

You are welcome! And I agree, they can be a pain sometimes. I'd be happy to take a look in a little bit. – robbieAreBest May 12 '21 at 15:28

Adjust mat-form-field floating label gap

1 Answers1