components: md error: long error messages overlap input fields

For 6.0.0 I needed to change @xumepadismal workaround to:

mat-form-field .mat-form-field {
  &-underline {
    position: static;
  }
  &-subscript-wrapper {
    position: static;
  }
}

If there are problems let me know.

I had the same problem even with a single line of error message, so I created the below solution, which animates in a 13px margin in case a field is touched and invalid. If you come up with an idea to scale it based on the number of error lines, make sure to notify me. The 13px margin comes from a measurement I made in chrome dev-tools, it’s identical to the error’s height.

add this to styles.css:

/* Additional placeholder for invalid mat-form-fields */
/* src: https://github.com/angular/material2/issues/4580 /*

mat-form-field.ng-invalid.ng-touched {
  animation: example;
  animation-duration: 0.3s;
  margin-bottom: 13px;
}

@keyframes example {
  from {margin-bottom: 0;}
  to {margin-bottom: 13px;}
}

And here is my workaround for now (in my styles.scss):

// Workaround for https://github.com/angular/material2/issues/4580.
mat-form-field .mat-form-field {
  &-underline {
    position: relative;
    bottom: auto;
  }
  &-subscript-wrapper {
    position: static;
  }
}

As stated in the Material Guidelines:

An error message should appear on a single line, if possible.

So it should be as short as possible.

In Material 15 I believe this is solved in the MDC version of the form fields.

You can add subscriptSizing="dynamic" to a <mat-form-field>.

You can also make that the default behavior by updating your angular.module.ts providers with the option.

“An error message should appear on a single line, if possible.” What if in business case scenario it is not possible?

I love how the response to so many Material issues seems to be “you’re doing it wrong”. Frankly, I’m really starting to regret having committed to using Material, since it’s so narrowly implemented for a very biased way of being used and developers seem to be very dismissive of other views. This is flat out a bug. What if you have multiple validators on a field, and the input triggers more than one? The validations messages will absolutely occupy more than one line, because mat-error will make it so. Hence, ugly overlap is pretty much certain, especially in mobile.

a short input field (like zipcode) would almost always have a hint message thats too long, do you really think that this issue should be closed? A workaround is given, however it’s not a solution?

@xumepadismal solution works great, I would only remove bottom padding in case the control is valid or not touched. This way most of the times elements would not jump

mat-form-field {
  &.ng-valid {
    .mat-form-field-wrapper {
      padding-bottom: 1.25em;
    }
  }

  &.ng-invalid,
  &.mat-form-field-invalid {
    .mat-form-field-wrapper {
      padding-bottom: 7px;
    }
  }

  &.ng-untouched {
    .mat-form-field-wrapper {
      padding-bottom: 1.25em;
    }
  }

  .mat-form-field {
    &-underline {
      position: static;
    }

    &-subscript-wrapper {
      position: static;
    }
  }
}

Is there any reason the solution from @blyndcide / @xumepadismal could not be merged? I’m using it with mat-hints and errors with success. This is very common problem because hints/errors on mobile almost always take more then a single line… Using different hints/errors depending on screen size is unrealistic.

In Material 15 I believe this is solved in the MDC version of the form fields.

You can add subscriptSizing="dynamic" to a <mat-form-field>.

You can also make that the default behavior by updating your angular.module.ts providers with the option.

And this is how to do that:

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
...
providers: [
...
{
    provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
    useValue: {
      subscriptSizing: 'dynamic'
   }
}

I agree with these @jimmmeh arguments:

By default, the form fields have a padding applied to the bottom of them, enough space for the absolute positioned error message to appear in when there is an error. If you change this to static then you introduce arguably a worse problem - whenever an error message appears, any form item underneath the one with an error will suddenly jump down the screen a little because the field with an error now needs more vertical space. With the existing padding + absolute positioning this is not an issue as the form item will always take up a constant amount of vertical space whether an error is shown or not.

But as I mentioned earlier, even Material Specs allows multiline subscripts if needed. I believe the best approach would be to have min-height reserved for one line of subscript content. Thereby we won’t have that “jumping” for short errors/hint while won’t overlap them with sibling components. And yes, form fields WILL jump for long errors which is not-so-bad from my point of view. What do you think guys?

I modified my workaround and share it on Stackblitz (see styles.scss): https://stackblitz.com/edit/angular-vyvbsj

This behavior also applies to “Helper text” of form field (<mat-hint>). And MD guidelines mentions the possibility of multiline:

On a single line if possible, or with text wrapping (if multiple lines)

.mat-form-field-wrapper {
    display: flex;
    flex-direction: column;

    .mat-form-field-flex {
        order: 1;
    }
    .mat-form-field-underline {
        position: relative;
        order: 2;
        bottom: 0 !important;
    }
    .mat-form-field-subscript-wrapper {
        position: relative;
        order: 3;
    }
}

Edited @dJani97’s solution little bit:

mat-form-field.ng-invalid.ng-touched {
  animation: bigger;
  animation-duration: 0.3s;
  margin-bottom: 17px;
}

@keyframes bigger {
  from {margin-bottom: 0;}
  to {margin-bottom: 17px;}
}

mat-form-field.ng-valid.ng-touched {
  animation: smaller;
  animation-duration: 0.3s;
  margin-bottom: 0px;
}

@keyframes smaller {
  from {margin-bottom: 17px;}
  to {margin-bottom: 0;}
}

It should be noted that this issue is not only for mat-error labels but for mat-hint labels as well.

Adding subscriptSizing="dynamic" does add some margin but in my case not enough as it creates this awkward effect:

So for the time being I am sticking to @dJani97’s solution.

mat-form-field .mat-form-field {
  &-underline {
    position: relative;
    bottom: auto;
  }
  &-subscript-wrapper {
    position: static;
  }
}

I have added your shared css styles, but still does not work.

@Hydhen Did you paste it to a scss file?

For me, the workaround also did not work. I got it working with the following css:

::ng-deep .mat-form-field-subscript-wrapper { position: static; } ::ng-deep .mat-form-field-underline { position: static; }

component.css:

#myOuterDiv ::ng-deep mat-hint {
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

In my case, the form-field is a record’s code, and the mat-hint is being used to show the descriptive text from the database record for the input code. For us, the record’s descriptive text might be too long to fit, but that doesn’t matter because the first bit (whatever fits) is enough.

Unless I am missing something, here, no one is mentioning the reason the error fields are marked as absolute in the first place and why changing them to static is not an ideal solution.

By default, the form fields have a padding applied to the bottom of them, enough space for the absolute positioned error message to appear in when there is an error. If you change this to static then you introduce arguably a worse problem - whenever an error message appears, any form item underneath the one with an error will suddenly jump down the screen a little because the field with an error now needs more vertical space. With the existing padding + absolute positioning this is not an issue as the form item will always take up a constant amount of vertical space whether an error is shown or not.

To my eyes, having fields jumping around when errors appears/disappear is much worse from a UX perspective than worrying about multi-line errors wrapping. You can always increase the default vertical spacing between form elements such that if multiple lines are required, there is space for them to fit into.

For me, this z-index worked by adding in style.scss

.mat-form-field-subscript-wrapper {
    z-index: 100; 
  }