md error: long error messages overlap input fields

[kiryl-kazlovich]

Bug, feature request, or proposal:

Bug (or question about) displaying long error messages in md-error

What is the expected behavior?

The error message needs to be visible without overlapping with other input fields

What is the current behavior?

If there are multiple error messages or if a message is too long it is displayed on top of the next input field

What are the steps to reproduce?

The plunk displays an example of a long error message for Last name, which is required, overlapping Email input field and 'Save' button on blur event: http://plnkr.co/edit/LX2iSTxWPJOvNVl0pzy8

What is the use-case or motivation for changing an existing behavior?

Long error messages in input form need to be displayed correctly

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

+-- @angular/animations@4.1.2
+-- @angular/cli@1.0.3
+-- UNMET PEER DEPENDENCY @angular/common@4.1.2
+-- @angular/compiler@4.1.2
+-- @angular/compiler-cli@4.1.2
| +-- @angular/tsc-wrapped@4.1.2
+-- UNMET PEER DEPENDENCY @angular/core@4.1.2
+-- @angular/flex-layout@2.0.0-beta.8
+-- @angular/forms@4.1.2
+-- @angular/http@4.1.2
+-- @angular/material@2.0.0-beta.5
+-- @angular/platform-browser@4.1.2
+-- @angular/platform-browser-dynamic@4.1.2
+-- @angular/router@4.1.2
| +-- @angular/core@2.4.10

| +-- typescript@2.2.2
| `-- typescript@1.8.10
+-- typescript@2.3.2

[donroyco]

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.

[kiryl-kazlovich]

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

[donroyco]

They are positioned absolute, so I don't think it will know where the next input field is.

[kiryl-kazlovich]

Exactly, it looks like I will need to build some workarounds. Would be nice to have the error stretched, otherwise md error seems to be not stable enough considering overlapping.

[AhHa45]

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?

[axmad22]

What happened with this BUG, I have an input with multiple mat-errors and they are overlapping the rest of the form. is it cause of this Absolutely-Positioned Flex Children .
"An error message should appear on a single line", what type of input has one single error message `

[xumepadismal]

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)

[xumepadismal]

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;
  }
}

[yoonjesung]

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

[intellix]

perhaps an option to disable inlining errors? The normal behaviour is fine when you've got something like: This field is required but when you've got a long error message then you're screwed