Materialize input field labels merging

Question

I have as part of a form this contact information section:

<div class="row">
<div class="col s12">
    <i class="material-icons prefix">account_circle</i>
    <input id="nameico" type="text" class="validate">
    <label for="nameico">Contact Name</label>
</div>
<div class="col s12">
    <i class="material-icons prefix">email</i>
    <input id="emailico" type="email" class="validate">
    <label for="emailico">Contact Email</label>
</div>
<div class="col s12">
    <i class="material-icons prefix">phone</i>
    <input id="telico" type="tel" class="validate">
    <label for="telico">Contact Phone</label>
</div>
</div>

However all three label are overlapping each other all inside the first input field for the persons name.

Are you using any other third party css package aside from materializecss? — KhoPhi, Aug 01 '16 at 11:17
Now Materialize CSS is updated, so now you can use M.updateTextFields(); — Vipin Kumar R. Jaiswar, Sep 19 '18 at 09:25

score 0 · Answer 1 · answered Aug 21 '16 at 17:21

Here is my Code may be it can help you.

JSFiddle link - JSFiddle

HTML Code -

<div class="row">
<div class="col s12 input-field">
    <i class="material-icons prefix">account_circle</i>
    <input id="nameico" type="text" class="validate">
    <label for="nameico">Contact Name</label>
</div>
<div class="col s12 input-field">
    <i class="material-icons prefix">email</i>
    <input id="emailico" type="email" class="validate">
    <label for="emailico">Contact Email</label>
</div>
<div class="col s12 input-field">
    <i class="material-icons prefix">phone</i>
    <input id="telico" type="tel" class="validate">
    <label for="telico">Contact Phone</label>
</div>
</div>

Materialize input field labels merging

1 Answers1