RolandHeath
commented
8 years ago Had a quick look into it, it appears to be (partially) a side-effect of the code to stop md-select from showing both a placeholder and a label.
The relevant css is:
md-input-container .md-placeholder { top: 0; opacity: 0; }
This class is removed when the model is filled, because the placeholder goes away. So the md-icon is getting not getting passed to the label properly, and is therefore only displayed in a hidden placeholder.
UPDATE: Looking in the code for md-select, it looks like there is an option to provide an md-select-header element when you need more than just text in the label. I had high hopes when I found this feature, it seemed like someone on the dev team had thought of this issue. Unfortunately, it wasn't the solution.
UPDATE:
So, it looks like this might be solvable by a PR, by dropping the icon into md-select-value with:
flex-grow:0; on it
flex-grow:1; on the md-select-icon element
You'd still need to fix the code that clears up md-select-value when an element is selected/cleared, or it'll display incorrectly.
And make sure that it shows up at exactly the right position.
Not sure about the animation you mentioned in the update, but that's a separate issue.
ThomasBurleson
Hi,
if we place
<label />containing<md-icon />into simple<md-input-container />then it is visible all the time: when there is / or is not value in an input field.But if we use
<md-select />instead of plain input then that icon is only visible when selector's model is not empty.Kindly check https://codepen.io/djFD/full/qZoMoN/
Thanks
UPD: just noticed. an animation of md-select from filled to empty state is missing too Firefox 45.0.1