MDL jquery: label overlaps the content into a input field

Question

I use Firefox Version 40.0.3/Chrome 45.0.2454.85 and i have the following problem:
The 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 isn't jQuery, but rather the fact that the component is unaware of the changes you're making (programmatic changes to an HTML element don't trigger events), so it doesn't know it should change its looks. You can test this by manually typing into the box; that should work correctly, even if jQuery is loaded.

You can use the element's API for changing the text instead, by doing:

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

(where my-textfield is the outer label element), provided the element is done upgrading. The other option is to perform the change directly, as you are doing, but triggering a "dirtiness" check on the element:

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

Hope this helps!

Answer 2

If you want to use both then , you have to use <br/>. Something like this..

<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/