md error: long error messages overlap input fields

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

[blyndcide]

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.

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