select: the height of a disabled md-select is 1px less than a not disabled md-select

[leibale]

If you find this issue on google and angular material didn't solved it yet, you can temporarily use the css from the codepen (only three lines) for now..

--

Actual Behavior:

• What is the issue? * The height of a disabled md-select is 1px less than a not disabled md-select.
• What is the expected behavior? Should be the same height.

CodePen (or steps to reproduce the issue):

• CodePen Demo which shows your issue: https://codepen.io/anon/pen/zzxwYJ
• Details: You can see that the two inputs (in each row) do not have the same height. If you will uncomment the css you will see that the problem is solved.

AngularJS Versions:

• AngularJS Version: 1.6.4
• AngularJS Material Version: 1.1.4

[mckenzielong]

Work around:

 md-select[disabled] .md-select-value {
  bottom: -1px;
} 

margin-bottom is not doing what was expected: https://github.com/angular/material/blob/master/src/components/select/select.scss#L123

[leibale]

@mckenzielong why bottom: -1px is better than padding-bottom: 2px (as i did in the codepen)?

[mckenzielong]

@leibale actually it seems bottom: -2px; padding-bottom:0; gives the best result: https://codepen.io/mckenzielong/pen/VWYMyv

[leibale]

@mckenzielong what is the difference between the solutions (padding-bottom: 2px and bottom: -2px; padding-bottom: 0;)?

[mckenzielong]

Look at the spacing between the red lines and the label text in the pen I posted. padding-bottom: 2px is not aligned. The dotted line for padding-bottom: 2px is also not perfectly aligned.

[leibale]

Oh, you right.. :)

I'm Trying to use box-sizing: border-box; to solve the problem

[Splaktar]

We did a lot of work in 1.2.0 to better synchronize things like this, but it looks like there may still be an issue here.

I've updated the CodePen to 1.2.1.