md-select layout issue

[myagoo]

Now md-select is able to use md-option's html as display value, this rule seems a little aggressive

.md-select-value *:first-child {
    flex: 1 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transform: translate3d(0, 2px, 0);
}

this rule will push 2px down each first children !

I don't know the meaning of this rule but maybe something like .md-select-value > *:first-child should do the trick

[mckenzielong]

👍 also overflow: hidden; is causing clipping on characters that fall below the baseline.

[myagoo]

Exactly ! I think this zealous rule is and will be the source of several bugs

[mckenzielong]

Even something like .md-select-value span or .md-select-value > span do the trick just fine.

I didn't realize it at first glance, but the transition is applied to the div that gets created in the dirty select... so selects with a selected value have an extra 2px transform applied. Getting rid of the extra 2px gets rid of the need to change overflow:hidden;

This is a small visual bug that is noticeable in the pizza / topping demo. Select one and leave one untouched. Bonus: select something like sausage or one that contains a character that hangs below the baseline.

[ddimitrop]

+1
I think that this is very noticeable and problematic.

Here is a codepen: http://codepen.io/ddimitrop/pen/bEdWqq

[jelbourn]

cc @rschmukler

[nickjackson]

I'm getting some issues with the flex: 1 0 auto; on that very class. The targeted nodes are not respecting the parent width and therefore the ellipsis wasn't working for md-option's with longer values.

[chrisajohn]

I am also having issues with the flex: 1 0 auto; I found that by altering the class this way gets the same result without any adverse impacts (that I can see).

.md-select-value *:first-child {
    flex: initial;
    width: 100%;
}