CODEWITHSUNDEEP
csssassangular-material
r3plica
r3plica

Reputation: 13367

Move the label in angular material to above the input

I am currently using angular material in my project and I have been asked to move input labels. Currently when you start typing in an input, they move so the middle of the label is on the input top border. I need to move them to just above the top of the input. Here is an example of what it currently looks like:

enter image description here

I tried to fix this myself by adding this sass:

.mat-form-field-appearance-outline {

  .mat-form-field-outline-start,
  .mat-form-field-outline-end,
  .mat-form-field-outline-gap {
    border: 2px solid currentColor !important;
  }

  .mat-form-field-outline-gap {
    border-left: none !important;
    border-right: none !important;
  }

  .mat-form-field-outline-start {
    border-radius: 25px 0 0 25px !important;
    border-right: none !important;
  }

  .mat-form-field-outline-end {
    border-radius: 0 25px 25px 0 !important;
    border-left: none !important;
  }

  .mat-form-field-wrapper {
    margin: 0 !important;
  }

  .mat-form-field-flex {
    // This padding centers the text
    padding: 2.75px 25px !important;
  }

  .mat-form-field-infix,
  .mat-form-field-label-wrapper {
    border-top: 5px solid transparent;
  }

  .mat-form-field-outline {
    color: $off-white;
    background-color: $off-white;
    border-radius: 25px;
  }

  &.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: $warm-red; // TODO: Add the theming
  }

  &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  &.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-30px) scale(0.75);
  }
}

.mat-form-field-label-wrapper {
  padding-top: 10px;
}

It's only these lines that actually move the label:

.mat-form-field-appearance-outline {
  &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  &.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-30px) scale(0.75);
  }
}

.mat-form-field-label-wrapper {
  padding-top: 10px;
}

But I want you to see the rest of the formatting we use. The problem with my solution is that the text gets cut off:

enter image description here

Does anyone know how to fix this?

Upvotes: 2

Views: 4748

Answers (1)

Mateusz Kita
Mateusz Kita

Reputation: 11

In my case (Angular Material 11.0.0) it is a working solution:

.mat-form-field-label-wrapper {
    transform: translateY(-20px) !important;
}
.mat-form-field-label {
    transform: translateY(-20px) !important;
}

edit: missing }

Upvotes: 1

Related Questions