Menu
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.
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 classI've also checked that <md-input-container> has the md-input-has-value CSS class.
706
This issue may also occur when you nest md-input-container like this:
<md-input-container class="md-block">
<md-input-container class="md-block">
<label>Some label</label>
<input ng-model="model.someProperty">
</md-input-container>
</md-input-container>
I just had to remove this extra md-input-container and problem solved.
Explanation (given by Segev -CJ- Shmueli):
When you add a value it adds class="md-input-has-value" to the wrapping md-input-container. If your input is wrapped by yet another one it, it will not receive that class and as a subsequence the text will become transparent.
74
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....
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
