Components: [Bug] MatHint and MatError renders on top of other components.

[Goodwine]

Bug, feature request, or proposal:

When MdHint is long enough that it breaks into multiple lines, it ends up rendering on top of other containers.

What is the expected behavior?

2 options:

1. Push things down. (maybe ugly?)
2. Use ellipsis but add an md-tooltip or another way to display the rest of the content.

What is the current behavior?

It renders on top of other components and it looks silly.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-dnolru
focus and blur any field

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

We have a "small" error message, something similar to "You need more characters". This is translated on multiple languages and some aren't as short as English so it takes almost double of that.
Still, things look ok on a large screen like a PC, but on mobile it renders on top of the components that follow the input.

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

Angular v5.0.0

[Goodwine]

I can "fix" the issue with some css changes, but ofc it's fragile to future changes.

.mat-input-underline,
.mat-input-subscript-wrapper,
.mat-input-ripple {
  position: initial !important;
  display: block;
}

[jelbourn]

We should probably address this in the documentation. This is working as intended right now.

You could take two approaches here: either long md-hint and md-error blocks increase the height of the input container or they don't. Right now we intentionally go with "don't" for a couple of reasons:

• Because the component is display: inline-block, it getting bigger would make things look bad when on the same line as other stuff
• The idea is that these hints and error messages should be short/concise. If you need to show a significant amount of information, it should be displayed in some other way.

[Goodwine]

I agree on that it should be short/concise, but not all languages can represent the same message in the same amount of characters. Sure we could find a different way to say the same in a different language so that it's short enough, but this doesn't scale when translations are done by a third party and we translate to a big set of languages.
Personally I would go for the option 2 (from the options above) or something similar to that.

Edit:
Some random idea (which is probably bad, but trying to do some brainstorming) is doing something like this:
https://plnkr.co/edit/g6dwNaVxyjXJSIkkF6bn?p=preview
Hover over the error message, the message shown initially with an ellipsis is now expanded.

[carecki]

Don't wan't to throw RTFMs here, but the Material Guidelines states that:

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

and for Helper text:

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

So it explicitly states for helper text (<md-hint>) that it can be multiple lines, and for error messages (<md-error>) it uses words "should, if possible" (for single line), and not "must", so it should also support multiple lines of text.
Saying that we should display these texts in some other way if can't fit into single line is against the concepts of material design.

[willshowell]

Here's an updated plunk of @Goodwine's example https://plnkr.co/edit/QjeolbffC2l7TwOcQcLD?p=preview

[Goodwine]

Updated example: https://stackblitz.com/edit/angular-dnolru

@carecki Yes, I agree with your argument, but take the next example as my use case.

<mat-error i18n="Error shown to users when email address is invalid.">
  Please enter a valid email address.
</mat-error>

If you run this example you will see "ok" results, things appear in a single line.

Now, let's say your app has to be translated in multiple languages and you need to support both mobile and desktop. You get the following text provided by your translators (using google translate for the sake of this example):

<mat-error>
  Por favor, introduce una dirección de correo electrónico válida.
</mat-error>

And now things get messed up. Surely I could go ask my translators "please use a very short sentence" but there's eventually going to be a case where such thing is not possible. Angular is just not flexible enough for this.

[mertdeg2]

@jelbourn It makes sense for material team to want short/concise error messages.

But in general we don't control the length of the text. Especially if error text is internationalized, one line error in English could be multi line error in other languages.

I think it would be cool if material had support for multiline errors. It seems pretty broken: https://stackblitz.com/edit/angular-5njmxc-3x9hm7?file=app/input-overview-example.ts

[jelbourn]

I would be open to adding an opt-in option that makes the control grow for multi-line messages. I don't think it should be the default, since I think have a jumping page layout is equally undesirable, but can see how it would be necessary in some situations.

[ianchi]

Any updates on this issue?
Best workaround meanwhile?

[carecki]

@Goodwine you didn't read my comment carefully - by citing material design specs I wanted to show, that specs allows multiline hints, and so should material controls for angular.

@ianchi, for me some custom css rules has been working from angular version 4 I believe. You can test it here: https://stackblitz.com/edit/angular-material2-fix-for-hints-and-errors?file=styles.scss

They css rules, when applied, allow to expand both mat-error and mat-hint. However they don't modify how mat-form-field looks and how much space it occupies when there is no hint or error, or when they take single line. So they are visually backward compatible.
The rules are as follows: (I use them globally, in the stackblitz example this is wrapped in custom class, so it affects only right side div).

.mat-form-field {
    .mat-form-field-wrapper {
      padding-bottom: 0;

      .mat-form-field-underline {
        position: initial !important;
        display: block;
        margin-top: -1px;
      }

      .mat-form-field-subscript-wrapper,
      .mat-form-field-ripple {
        position: initial !important;
        display: table;
      }

      .mat-form-field-subscript-wrapper {
        min-height: calc(1em + 1px);
      }
    }
  }

And here how it looks:

[ianchi]

Thanks @carecki, I’ll give it a try.

[jaetea]

Does anyone know how to get this working with appearance=outline fields?

[maxandriani]

Hi @jelbourn

I undertood that an on growing field may look bad, but we can not design our components like dribble design, that looks amazing on examples but does not work on real life. Like @carecki said, Material's docs allow multi-line hints and erros, so you guys should support this.

Another issue, if you pay attention in @Goodwine images, there is a field with an error message and other field with red label that I can't easy understand when the hint ends and label start because there is no space beetwen input blocks. It is a seriously design (gestalt) issue.

[kamleshwebtech]

.mat-form-field { .mat-form-field-wrapper { padding-bottom: 0; .mat-form-field-underline { position: initial !important; display: block; margin-top: -1px; } .mat-form-field-subscript-wrapper, .mat-form-field-ripple { position: initial !important; display: table; } .mat-form-field-subscript-wrapper { min-height: calc(1em + 1px); } } }

I have tried with your shared css, does not work. Please see attached screenshot. Thanks.

[tomayoteebroo]

.mat-form-field { .mat-form-field-wrapper { padding-bottom: 0; .mat-form-field-underline { position: initial !important; display: block; margin-top: -1px; } .mat-form-field-subscript-wrapper, .mat-form-field-ripple { position: initial !important; display: table; } .mat-form-field-subscript-wrapper { min-height: calc(1em + 1px); } } }

I have tried with your shared css, does not work. Please see attached screenshot. Thanks.

try adding :host ::ng-deep

:host ::ng-deep .your-class .mat-form-field {
    .mat-form-field-wrapper {
        padding-bottom: 0;
        .mat-form-field-underline {
            position: initial !important;
            display: block;
            margin-top: -1px;
        }
        .mat-form-field-subscript-wrapper,
        .mat-form-field-ripple {
            position: initial !important;
            display: table;
        }
        .mat-form-field-subscript-wrapper {
            min-height: calc(1em + 1px);
        }
    }
}

[ricardosaracino]

Don't wan't to throw RTFMs here, but the Material Guidelines states that:

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

and for Helper text:

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

So it explicitly states for helper text (<md-hint>) that it can be multiple lines, and for error messages (<md-error>) it uses words "should, if possible" (for single line), and not "must", so it should also support multiple lines of text.
Saying that we should display these texts in some other way if can't fit into single line is against the concepts of material design.

Also this becomes even more difficult when accounting for mobile screens that could have significantly narrower displays

[Kartikkman]

Is anyone in Team working on this issue ? It seems Material has lots of restrictions & doesn't provide that much flexibility to developer .

[FARHANE]

It's your css.
https://stackblitz.com/edit/angular-dnolru-y6qxxh?file=styles.css