MDL jquery: label overrides content in input field

Question

I am using Firefox version 40.0.3 / Chrome 45.0.2454.85 and I have the following problem:
placeholder/label overlaps the content if I use jQuery.

JavaScript:

 $("#eventAddKurzLB").val("test"); 

HTML:

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="eventAddKurzLB" /> <label class="mdl-textfield__label" for="eventAddKurzLB">Kurzbezeichnung:</label> <span class="mdl-textfield__error">Es sind nur Zahlen, Buchstaben und Bindestriche erlaubt!</span> </div> 

Example:

Live Example:
https://jsfiddle.net/vutLb9ut/2/

Answer 1

The problem is not in jQuery, but that the component does not know about the changes you made (program changes to the HTML element do not fire events), so it does not know what it should change it looks like. You can verify this by manually entering in the field; this should work correctly even if jQuery is loaded.

You can use the element API to change the text instead:

$("#my-textfield").get(0).MaterialTextfield.change('test');

(where my-textfield is the outer label element) if the element is being executed for updating. Another option is to make the change directly, as you do it, but causing a "dirt" check on the element:

$("#my-textfield").get(0).MaterialTextfield.checkDirty();

Hope this helps!

Answer 2

If you want to use both options, you must use <br/> . Something like that..

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <label class="mdl-textfield__label" for="eventAddKurzLB"> Kurzbezeichnung:</label> <span class="mdl-textfield__error">Es sind nur Zahlen, Buchstaben und Bindestriche erlaubt!</span> <br/> <input class="mdl-textfield__input" type="text" id="eventAddKurzLB" /></div> 

check fiddle → https://jsfiddle.net/vutLb9ut/3/