(md-select) not aligned well with other elements

[sathishvj]

md-select is not properly bottom-aligned with other elements. Code similar to below puts the md-select floating a few pixels above the middle or bottom where it should be.

      <div layout='row' layout-fill layout-margin>
            <md-input-container flex>
              <label>Name</label>
              <input type='text'>
            </md-input-container>
            <md-select placeholder="Select something" flex>
                <md-option ng-value="db.Name" ng-repeat="db in dbs">{{ db.Name }}</md-option>
            </md-select>
        </div>

[sathishvj]

Oops. Jumped the gun on that one. I solved it by adding layout-align
<div layout='row' layout-fill layout-margin layout-align='start center'>

sorry.

[leeyeh]

Hi, @sathishvj,
I run into a similar problem. Here is a demo using master: http://codepen.io/anon/pen/GgGvYe
I tried your solution and it doesn't help.
Can you provide a well-aligned demo. Thank you.

[sathishvj]

Interestingly I'm not able to get it to align perfectly now. Maybe this should be reopened.

[rschmukler]

This should be fixed with the latest commits in master

[fweber1]

Add the following CSS to override the md-select margin:

.md-select-placeholder {
	margin-top: -5px;
}

The margin-top setting may need adjusting based on your combined CSS and browser/platform

[MattiaCostamagna]

I know this issue is a bit old, but for anybody who may have the same problem, I solved it with this:

md-input-container .md-input-messages-animation {
    // This because md-select are positioned lower than other material components
    // and move themselves up only when an error ng-message is displayed 
    height: 20px;
}

[mfmese]

.mat-select {
    margin-top: -10px;
}