Search code examples
ember.jsmaterialize

overlapping of label and value on input text box in materialize in ember

i have installed materialize plugin in my ember app using 'bower install materialize'

i have created a form in my hbs--

> <div class="input-field col s12 m12 l8">
>               <i class="material-icons prefix">email</i>
>               {{input id="email" type="text" name="email" class="validate" value="overlap"}}
>               <label for="email">Email<i class="mandatoryIcon">*</i></label>
>             </div>

but in ui this label and value are getting overlapped. need to fix this issue.. how to do ????

Solution

  • When the input already has a value, you need to initialize it that way.

    Go look at the documentation. (Look for prefilling text fields)

    In javascript, do the following:

    Materialize.updateTextFields();

    Or add the class active to the label.

    Update: based on the new documentation the following code is correct :

    M.updateTextFields();