Material: md-datepicker: doesn't align with other inputs

[marcomafessolli]

Image:

Code:

<div layout layout-sm="column">
        <md-input-container>
                 <label>Login</label>
                <input type="text" name="login">
         </md-input-container>

       <md-datepicker ng-model="ts"></md-datepicker>
</div>

---

As a workaround I'm using margin-top: 13px; on the md-datepicker element

[jelbourn]

@marcomafessolli do you still see this with 1.0.1 ?

[RolandHeath]

@jelbourn This seems related to #6232
That issue has a codepen, and it seems that the datepicker aligns with the md-select on that codepen.
However, it seems that every other type of input are still misaligned with one another.

There's already a host of alignment issues, something more comprehensive is really needed.
Here's an update of the codepen to version 1.0.1, with the datepicker included - codepen

[marcomafessolli]

@jelbourn I'm using "angular-material": "master" version and yes, it still.

Another example code:

<div layout layout-sm='column'>
        <md-input-container flex>
            <label>Name</label> 
            <input type="text"  required='true'  name="name" ng-model="model.name"/>
        </md-input-container>
        <md-datepicker  ng-model="model.data"  md-placeholder="Data">
        </md-datepicker>
</div>

Processed md-datepicker CSS (Safari):

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-font-smoothing: antialiased;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-size: auto;
color: rgba(0, 0, 0, 0.870588);
display: block;
font-family: Roboto, 'Helvetica Neue', sans-serif;
height: 94px;
margin-right: -18px;
overflow-x: hidden;
overflow-y: hidden;
padding-right: 18px;
vertical-align: middle;
white-space: nowrap;
width: 188px;

Processed md-input-container CSS (Safari)

-webkit-font-smoothing: antialiased;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
display: block;
flex-basis: 80%;
flex-grow: 1;
flex-shrink: 1;
font-family: Roboto, 'Helvetica Neue', sans-serif;
height: 58px;
margin-bottom: 18px;
margin-left: 0px;
margin-right: 0px;
margin-top: 18px;
max-height: 100%;
max-width: 80%;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
position: relative;
vertical-align: middle;
width: 1088px;

[brunsgaard]

Try

<div layout="row" div class="md-inline-form">
  <md-input-container>
    <label>Login</label>
    <input type="text" name="login">
  </md-input-container>
  <md-datepicker ng-model="ts"></md-datepicker>
</div>

Does this help you out

[marcomafessolli]

@brunsgaard it worked, thanks.

[rochapablo]

I've tried, it have changed a little but still not align 100%.

[subeebot]

I ended up adding this to my CSS:

.md-inline-form md-datepicker {
margin-top: 15px;
}

[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 (411/400 (102%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext4.iad.github.net ([192.30.252.195]:48189 helo=github-smtp2a-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 1avrw5-001GQ4-6N
for yann.[email protected]; Thu, 28 Apr 2016 21:49:23 +0200
Date: Thu, 28 Apr 2016 12:47:12 -0700
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1461872832;
bh=PCpQpjtv+m+MvpArlfif3ZNKeAXAlGU8kyyVbtTcw5c=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=kG5ifYZuF1sUCDD7Ft+eeroyzFJOJR55ZSDnQ9fvoxOFa6nmSbqr7pepzzNay+Sm1
Hfls4k2dO/OG1gdx8uFfEKczf7k+NlsGcbL+jZfitgr3oCXk3229a9bpfIBXcFJgz8
USPivO8s465WnoJ10gJs7jwWjdjBBgaAdSFDSgSM=
From: Thomas Burleson [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-datepicker: doesn't align with other inputs
(#6219)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_572268c09c90d_2c043f9c7df592a0261034";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: ThomasBurleson
X-GitHub-Recipient: yanndupuy
List-ID: angular/material
List-Archive: https://github.com/angular/material
List-Post: mailto:[email protected]
List-Unsubscribe: mailto:unsub+000df0dc04387a473a87[e-mail],
https://github.com/notifications/unsubscribe/AA3w3Mj8CtzTyO2cO5GdhA8rrCUamqQmks5p8Q7AgaJpZM4GytK5
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: Closed #6219. --- 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/6219#event-644802207
Closed #6219. [...]

Content analysis details: (1.5 points, 5.0 required)

pts rule name description

---

0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked.
See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block
for more information.
[URIs: github.com]
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_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
X-Spam-Flag: NO

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

Closed #6219.

---

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/6219#event-644802207
----==_mimepart_572268c09c90d_2c043f9c7df592a0261034
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #6219.

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

----==_mimepart_572268c09c90d_2c043f9c7df592a0261034--

[anthonyhadi]

Do like this, it will align perfectly.

<div layout="row">
<md-input-container class="datepicker-align">
<label>Login</label>
<input type="text" name="login">
</md-input-container>
<md-datepicker ng-model="ts"></md-datepicker>
</div>

.datepicker-align {
margin-top: 5px;
}

[ashishpatel02]

@marcomafessolli Use for both controls and it will work fine

[onecuriousmiind]

Does wrapping the md-datepicker in a md-input-container seem like a good idea? Apparently, it fixes the alignment issue.

[ashishpatel02]

@b-lawrence I am using it for most of the controls, no issues so far.