Angular Material input not showing value when not focused

I’m using Angular Material 1.0.3 and <input> elements are correctly set but their values are visible if I click one to focus it. Once it’s not focused I can’t see the value.

The markup is as follows:

<md-input-container>
    <label>Some label</label>
    <input ng-model="model.someProperty">
</md-input-container>

After checking if it’s a CSS issue, I’ve found that the following CSS selector is turning color into transparent:

md-input-container:not(.md-input-has-value) input:not(:focus) {
     color: transparent;
}

And obviously, it seems like the input doesn’t have the .md-input-has-value CSS class.

For now, I can’t figure out what’s going wrong.

Additional info

In my case, in opposite of Angular Material demos, controllers are on directives and UI Router states.

In fact, I can confirm that I’ve already copy-pasted the same markup in my index.html as direct child of <body> and then it works as expected.

Maybe it has some relation with this open issue: Compiling material directives on the fly: md-input-has-value attribute not set #3017.

<md-input-container> has the md-input-has-value CSS class

I’ve also checked that <md-input-container> has the md-input-has-value CSS class.

Answer

Angular material version – v1.0.1-master-edfe2ad

Just subscribed to help put anyone who is having this issue.

Go to the angular-material.css file and change this (for my is line 11,334)

md-input-container:not(.md-input-has-value) input:not(:focus),
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
color: transparent; } 

to color black and viola fixed….

Leave a Reply

Your email address will not be published. Required fields are marked *