-
Notifications
You must be signed in to change notification settings - Fork 3.4k
text and md-input-container on the same row are not aligned #6214
Comments
+1 |
+1 please remove/hide md-errors-spacer when no errors are shown to make no overly big forms. |
was not being added when not using validation before. |
+1 |
1 similar comment
+1 |
+1, forms without |
+1 |
On a related note, |
+1 |
1 similar comment
+1 |
+1 |
+1 |
+1 |
1 similar comment
+1 |
+1 |
+1 |
2 similar comments
+1 |
+1 |
To all the 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. |
+1 |
This issue is closed as part of our ‘Surge Focus on Material 2' efforts. |
@ThomasBurleson So you're saying you're not going to fix this until the fall? |
css: .md-errors-spacer:empty { display: none; } |
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. |
create a class such as "hide-error-msg" and add it to your md-input-containers that have no error messages, like so:
Then ins CSS: md-input-container.hide-error-msg .md-errors-spacer:empty { display: none; } |
@danialkhansari The 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. |
+1 |
codepen 1: http://codepen.io/anon/pen/yeNPgw
codepen 2: http://codepen.io/anon/pen/qbbaYX
The text was updated successfully, but these errors were encountered: