Material: text and md-input-container on the same row are not aligned

[uriva]

codepen 1: http://codepen.io/anon/pen/yeNPgw
codepen 2: http://codepen.io/anon/pen/qbbaYX

[xplodwild]

+1
<div class="md-errors-spacer"></div>
This has been added recently and pad the fields of one line every input field. This causes the text to be misaligned, as well as make overly big forms spacing when not using validation and/or without errors.

[SnakeME]

+1 please remove/hide md-errors-spacer when no errors are shown to make no overly big forms.

[JasperG]

was not being added when not using validation before.

[michaelkrog]

+1

[gligoran]

+1

[julienpa]

+1, forms without ng-message are having unnecessary large spacings

[chrislambe]

+1

[vrosa]

On a related note, <div class="md-errors-spacer"></div> is only attached to containers with input fields but not with md-select. Ideally they should have the same behaviour.

[stewwan]

+1

[danielmana]

+1

[karsunke]

+1

[cadilhac]

+1
Fix not seen in 1.0.2

[thanuzz]

+1

[aprezv]

+1

[VivienZo]

+1

You can quickly fix this issue by using this CSS:

md-input-container .md-errors-spacer {
    min-height: 0;
}

With this code, if there is no error, there is no space below the input.
Hope it could help some.

[alexandrejunges]

+1

Good workaround @VivienZo.

[manuelagard]

+1
Thx @VivienZo

[aishwat]

+1
Thanks @VivienZo

[cmacdonnacha]

+1

[skoszuta]

+1

[edmundquintero]

+1
Thanks @VivienZo

[jpcmf]

+1

[duluca]

+1

[suryaiiit]

+1

[anmarcek]

+1

[sakuyayc]

+1

[midhunadarvin]

+1

[antonsamper]

+1

[mamluka]

+1

[themaniac]

+1

[hopeng]

+1

[sweatherall]

+1

[elekzalan]

+1

[idsulik]

+1

[bsandrow]

To all the +1ers: It's possible the use the "Add Reaction" button to add a Thumbs Up / +1 to a comment. (like the "comment" that is the issue report, for example). I would like to be able to watch this issue for updates without a constant stream of "me too" posts.

This issue really comes down to the Angular Material team making a decision on error spacing and sticking to it. On the one hand people are complaining about "overly large" forms. On the other hand, when the error messages pop in you have form elements moving all over the place which is not very visually appealing either.

For example, I currently have a login form, where if you click a the "Reset Your Password" link, the loss of focus on the email field (the email field gets focus by default when the form launches) causes the error to pop in. Since the error space isn't statically reserved, the "Reset Your Password" link (which is under the form) is pushed down and (depending on where the mouse cursor is positioned) out of the way of the cursor. This leads to the click event never happening. Obviously there are ways for me to work around this, but I feel like I shouldn't have to work around this issue.

[tpphu]

+1

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting.

[jeffklassen]

@ThomasBurleson So you're saying you're not going to fix this until the fall?

[Prozi]

css: .md-errors-spacer:empty { display: none; }

[danialkhansari]

display:none or height:0 are not good solutions since they hide error messages in all situations. What should I do if I want to disable it for my search input and leave it as is for registration form fields? We need a way to at least define custom css classes for this tag.

[durbonas]

create a class such as "hide-error-msg" and add it to your md-input-containers that have no error messages, like so:

<md-input-container class="hide-error-msg"> <label>Title</label> <input ng-model=""> </md-input-container>

Then ins CSS:

md-input-container.hide-error-msg .md-errors-spacer:empty { display: none; }

[topherfangio]

@danialkhansari The display: none approach above should be just fine because it does not stop the errors from appearing. The spacer just provides a minimum height so that the messages do not jump/push content when they come into view.

We also have a PR in the works which will automatically detect if your input container has a messages directive and auto-apply the spacing properly. IIRC, this also gives you a way to manually add/remove the class so you have even more control, but it's been a while since I looked at it.

[egantz]

+1
Did the min-height workaround though it is not ideal at all.