Geek Answers Handbook

Angular Input material that does not display value when it is not focused

I am using Angular Material 1.0.3 and <input> elements that are set correctly, but their values ​​are visible if I click one to focus it. When it is not focused, I do not see the meaning.

The markup is as follows:

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

After checking if this is a CSS problem, I found that the following CSS selector turns color into transparent :

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

And, obviously, it looks like there is no .md-input-has-value CSS class in .md-input-has-value .

So far, I can’t understand what is going wrong.

Additional Information

In my case, unlike the Angular Material demos, the controllers are in directives and states of the UI interface.

In fact, I can confirm that I already copied the same markup in my index.html as a direct child element of <body> , and then works as expected.

Perhaps it has something to do with this open problem: Compiling material directives on the fly: the md-input-has-value attribute is not set # 3017 .

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

I also verified that <md-input-container> has a md-input-has-value CSS class.

+8
source share
4 answers

Angular material version - v1.0.1-master-edfe2ad

Just sign up to help someone who has this problem.

Go to angular -material.css file and change it (for my 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; }

color black and scarlet fixed ....

+1
source

This problem can also occur if you insert md-input-container as follows:

 <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 solve the problem.

Explanation ( Asked by Segev -CJ-Shmueli ):

When you add a value, it adds class = "md-input-has-value" to wrapping md-input-container. If your input is wrapped with another one, it will not receive this class and as a subsequence the text will become transparent.

+3
source

Finally, I did what I had to do a week ago: try the same application in other web browsers .

Exactly the same code in Firefox, Internet Explorer 11, and Edge works as expected: it does not tolerate the problem explained in my question.

The joke here is a simple snippet that does not demonstrate the problem, because with this simple markup, Chrome 47 returns 0 nodes when requesting a selector using document.querySelectorAll . In my actual markup, it finds the whole element.

 document.addEventListener("DOMContentLoaded", function() { document.getElementById("result").textContent = "elements found: " + document.querySelectorAll("md-input-container:not(.md-input-has-value) input:not(:focus)").length; }); 
 <md-input-container class="md-input-has-value"> <label>Some label</label> <input ng-model="model.someProperty"> </md-input-container> <div id="result"></div>

Update

I upgraded Chrome to 48 and the problem was resolved. In the end, this is a problem with the browser with the :not selector when the elements are very nested. If someone can find an open / closed problem in Chrome trackers, it would be great to add a link to my answer.

Update 2

Argh! Now some <input> fields work well, while others are still experiencing this problem. These are those that are inside the directives.

Everything still works in Firefox, Explorer, and Edge.

0
source

I worked on some input fields and ran into the same problem. Please check your code and make sure that you are not using an input container inside another input container, e.g.

 <md-input-container class="md-input-has-value"> <label>Some label</label> <input ng-model="model.propertyName"> </md-input-container>
0
source

More articles:


All Articles