Material: md-select missing md-errors-spacer

[johnSowingo]

When md-select contains ng-messages, there is no md-errors-spacer.

This causes the height to change when the error is shown (shifting everything down).

This is occuring in your example as well: http://codepen.io/anon/pen/qbbvaG

[epelc]

+1 this screws up alignment of some forms in 1.0.0

[vrosa]

+1

[nurp]

I didn't add any error handling but my form looks weird because of missing md-errors-spacer under md-select (I guess).
http://codepen.io/anon/pen/RrRJvE

[ghost]

@nurp yes you are right. You can add <div class="md-errors-spacer"></div>.

[pdore-netfore]

+1

[bojancai]

+1

[bostondv]

+1

[mangrish]

+1

[raffaele-abramini]

+1

[juanpujol]

+1

[fyodorvi]

+1

[brunocabezas]

+1

[nestorbritez]

+1

[jpolo]

I am having many issues with md-errors-spacer in general. For some components it is not displayed. For some other cases such as composed input (i.e. ngModel based directive with multiple input, select, checkbox inside) it is displayed inside the directive and breaks the layout.

[mattdanna]

Yeah it's definitely inconsistent. I get different behavior if it's in a <md-input-container> vs. standalone.

[fmalk]

+1
Trying to put two <md-input-container> together, first with <input> has the <md-errors-spacer>, second with <select> doesn't have it, so vertical alignment is off

[fmalk]

To be fair, https://github.com/angular/material/issues/6214 has a valid workaround (for alignment errors due to this issue)

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[johnSowingo]

Under which reason is this issue being closed?

[yanndupuy]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain zyapps.com has exceeded the max emails per hour (425/400 (106%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext3.iad.github.net ([192.30.252.194]:44146 helo=github-smtp2b-ext-cp1-prd.iad.github.net)
by serveur.ex2-p10.com with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.87)
(envelope-from [email protected])
id 1avs1i-001OKW-96
for yann.[email protected]; Thu, 28 Apr 2016 21:55:09 +0200
Date: Thu, 28 Apr 2016 12:54:24 -0700
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1461873264;
bh=3e8TKximodf29yRsWOyMbA4RQdG9jSWNh/ApSzIlH+Q=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=t5YqFlUQvFNyFkIASYiFPHIceARhwRRhCWpyOzn88wyoNS5l6KX+EEbuhWEaHh/lx
F9ZGhPoRb9+knHHAiYP5n1gW4mAQR3Cn+Czda9VR1xLshXmpNf3NR//+2x7WBYmCdi
wR1V7JigZGngScw48aqcklx30S43fXLKxDMe/qDI=
From: johnSowingo [email protected]
Reply-To: angular/material [email protected]
To: angular/material [email protected]
Cc:
Message-ID:
In-Reply-To:
References:
Subject: Re: [angular/material] md-select missing md-errors-spacer (#6351)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_57226a706128a_1ae33fe2fb28f2bc3495e";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: johnSowingo
X-GitHub-Recipient: yanndupuy
List-ID: angular/material
List-Archive: https://github.com/angular/material
List-Post: mailto:[email protected]
List-Unsubscribe: mailto:unsub+000df0dc05dd707862da[e-mail],
https://github.com/notifications/unsubscribe/AA3w3MgPNApg6zUnB2IbZaQ1HIRpaWgyks5p8RBwgaJpZM4G210t
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: yann.[email protected]
X-Spam-Status: No, score=1.5
X-Spam-Score: 15
X-Spam-Bar: +
X-Ham-Report: Spam detection software, running on the system "serveur.ex2-p10.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root\@localhost for details.

Content preview: Under which reason is this issue being closed? --- You are
receiving this because you are subscribed to this thread. Reply to this email
directly or view it on GitHub: https://github.com/angular/material/issues/6351#issuecomment-215543165
[...]

Content analysis details: (1.5 points, 5.0 required)

pts rule name description

---

1.6 HTML_IMAGE_ONLY_12 BODY: HTML: images with 800-1200 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
X-Spam-Flag: NO

----==_mimepart_57226a706128a_1ae33fe2fb28f2bc3495e
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Under which reason is this issue being closed?

---

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/angular/material/issues/6351#issuecomment-215543165
----==_mimepart_57226a706128a_1ae33fe2fb28f2bc3495e
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Under which reason is this issue being closed?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

----==_mimepart_57226a706128a_1ae33fe2fb28f2bc3495e--

[stephengardner]

You can just add a custom directive to put an errors spacer in... Perhaps I'll throw that together and submit it.

[stephengardner]

Extend the md-select directive and add the spacer to all of them so you don't have to sweat it.

module mdSelectDirective {
    function mdSelectDirective(): ng.IDirective {
        return {
            restrict: 'E',
            link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {
                element.after('<div class="md-errors-spacer"></div>');
            }
        }
    }
    angular.module('myApp').directive('mdSelect', mdSelectDirective);
}

P.s. if you haven't jumped on the TypeScript train... Do so. Can't stress that enough