md-select doesn't line up with other input elements in md-content

[smartshaila]

I've got several md-input-containers and an md-select in an md-content with layout set to row, and the md-select doesn't line up with the other input fields.

As a temporary override, I can explicitly set margin-top to 1.7em on the md-select to get it to line up.

[david-gang]

:+1
We experience the same issue with FF.

[smartshaila]

I've experienced the issue with Chrome, I haven't tested in any other browsers.

[Dkendal]

:+1 can confirm in firefox 39.0a2

[transitive-bullshit]

👍 experiencing on Chrome

[redyyu]

input inside md-input-container will get string height.
it's cause by parent layout="row" and other md-select inside md-input-container is too hight.

1. I need md-input-container is for validation.
2. I need selects have relative fixed width so parent element is layout="row".

I can only manual override it by custom css?

I fixed by reset all padding height even line height.

This is less

.input-row {
  padding-bottom: 26px;
  & md-input-container {
    padding-bottom: 2px;
  }
  & md-input-container md-select{
    padding: 2px;
    padding-bottom: 0;
    line-height: 28px;
  }
  & md-input-container .md-input:first-child {
    padding-top: 8px;
  }
  & .icon-input md-input-container{
    margin-right: 0;
  }
  & .icon-input md-icon{
    margin-right: 8px;
  }
}

[robertmesserle]

@smartshaila I believe I addressed this issue sometime last week - can you confirm that this is still an issue in 0.10.0? Closing for now, will re-open if it is still an issue.

[ninety7]

I updated to 0.10.0 and still have this issue, same as the screenshot from @redyyu

[robertmesserle]

Can somebody create a CodePen demonstrating this issue?

[redyyu]

here you are.

http://codepen.io/anon/pen/WvEyeR

please note:

the input-field with layout="row" is for a search button beside the input my project.
I made simplified to removed the button.
you can take layout="row" out. the input area will will still short than those selects.

div.input-field(
    flex
    layout="row"
    )

In this case I also need percent of width for each part of select or input ( thats regular needs right?)
that's why they are in rows with percent flex box.

If that sample is to complex.
there is another simple fork one.

http://codepen.io/anon/pen/gpxKrP

I take out every column of div. looks strange height of input.
both chrome and safari.

In the angular material official demo
the select label is 4px low than input label.
the bottom line is 1px low than input bottom line.
both happened in safari. (because safari has some default styles for input. need to be override.)

Please also take care about no-label and has label or some static label kind things, I did lot override for align up those different form fields. a lot...... a lot...... lot....

[robertmesserle]

Awesome, thanks! For 0.11.0, I believe we are going to have a focused
effort on tying the styles for all inputs together more cleanly. It's
great to have this example to include.

On Tue, Jun 16, 2015 at 10:11 AM, Redy notifications@github.com wrote:

here you are.

http://codepen.io/anon/pen/WvEyeR

—
Reply to this email directly or view it on GitHub
#2793 (comment).

[redyyu]

I did update my last comment, with more details, hope that's helpful...

[eneufeld]

The issue is still there if the md-select is wrapped in a ng-transclude element.
The css selector for aligning md-select inside md-input-container is "md-input-container > md-select" but for all other input elements it is "md-input-container .md-input"