Labels and text overlap in form if attribute 'value' set in input type 'text', 'email'.

[Somsubhra]

<div class="row">

    <div class="col s6 input-field">
        <input type="text" id="fname" required value="James">
        <label for="fname">First Name</label>
    </div>

    <div class="col s6 input-field">
         <input type="text" id="lname" required value="Potter">
         <label for="lname">Last Name</label>
    </div>

</div>

Expected output:

I am using Version 0.9

[Dogfalo]

~~Make sure you have linked jquery and our materialize.js properly. ~~ I tested your code and it worked for me

edit: Nevermind I misread your issue, this was fixed after v0.9. There will be a new release soon with this fixed.

[rickghome]

this problem does not appear to be resolved. Any update?

[Dogfalo]

It should only not be working if you have some type of dynamic templating in your app.

[rickghome]

I'm loading a form via ajax. When I click a field, the label animation works. It's just an issue for fields that have values set. Then you see the value, and the 'non-animated' label.

[Dogfalo]

if you are loading it in ajax just add class active to the label

[rickghome]

Ok, that works. Excellent framework! Please add feature to the docs.

[Sajonara]

@Dogfalo: Actually this is not a proper solution, just a workaround. Because an "active" label's indentation and a normal label one's is different.

One could change the indentation via css.

Kind regards.

[rlugge]

Running into this exact issue in Ruby on Rails. Wound up writing the following code to 'fix' it. (Note the code is in a partial for code de-duplication purposes, hence hence the use of .send)

<div class='col m6 l6 s12 profile-attribute-display input-field'>
    <% if @user.send(symbol).present? %>
        <%= form.label symbol, class: 'active'  %>
    <% else %>
        <%= form.label symbol  %>
    <% end %>
    <%= form.text_field symbol %>
</div>

[debugger24]

How to do same thing for date

[rlugge]

@rahulcomp24 just replace the form.text_field call with the appropriate form helper for your date field.

[debugger24]

@rlugge I am not using ruby. I am using jQuery

[rlugge]

Then life is even easier, @rahulcomp24! Just set the 'active' class on controls that are filled.

[james12]

If 'input' field not have a value when I through from 'ajax' but the 'value is empty' i already add 'active' class my label. How i fix it without place holder?

[mcifone]

@james12 Try this: execute Materialize.updateTextFields(); after the ajax call instead of adding active classes

[gibahjoe]

Issue not fixed.

[dkrish]

getting the same problem when adding values to form elements via ng-model (Angular 1). Neither the class="active" on the label nor the Materialize.updateTextFields() are fixing the issue.

[LocDaiNguyen]

If you are using angular 2+ you can use ngClass to add the active class to the label. When property is loaded the active class gets added and moves up.

Works on chrome 56 / mac book pro 10.11.4 el capitan

<input
  [ngModel]="user?.firstName"
  type="text"
  name="firstName"
  id="firstName"
  class="validate">
<label [ngClass]="{'active': user?.firstName}" for="firstName">First Name</label>

[Robouste]

Still have the problem using Symfony 3 and Twig templating.

Removing the "input-field" class did the trick, but label are always "up", even when input is empty. I still prefer this solution over the overlaping thing.

[tomscholz]

@Robouste Have you tried https://github.com/Dogfalo/materialize/issues/180#issuecomment-256384139 ?

[Robouste]

@tomscholz Yes, I also tried to add the "active" class

[Robouste]

doing Materialize.updateTextFields(); works on field updated with or without ajax but doesn't work with pre-filled form by the browser (like a login form).

[fega]

@Robouste Are you using any kind of rendering library/ framework? is Materialize.updateTextFields(); placed in to a $(document) ready?

[Robouste]

I'm using Symfony3, and the update text function is in document ready.

[fega]

@Robouste could you provide an example (codepen) to reproduce the issue?

you can fork this

[WaterDLaw]

For the Ruby guys:

class="<%= @profile.name.present? ? "active" : ""%>"

If the column is not empty add the class active. Not sure if its the best solution but it works.

[mohdsafeernk]

@rickghome please add below class when text box has value. if you add class active to the label in angular it doesn't work.

.focused{
    font-size: 12px !important;
    -webkit-transform: translateY(-140%);
    -moz-transform: translateY(-140%);
    -ms-transform: translateY(-140%);
    -o-transform: translateY(-140%);
    transform: translateY(-140%);
}

its works for me

[choyno]

$('.input-field label').addClass('active');
setTimeout(function(){ $('.input-field label').addClass('active'); }, 1);

[GitFlip]

Anyone have this issue when using Electron? I've created an Electron Test App and want to try out using Materialize. Screenshot of issue: https://i.imgur.com/S5aJ4ys.png

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Materialize Form Test</title>
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
</head>
<body>

   <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="js/materialize.min.js"></script>

  <nav class="light-blue lighten-1">
        <div class="nav-wrapper">
            <a class="brand-logo center">Materialize Form Test</a>
        </div>
  </nav>

  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="I am not editable" id="disabled" type="text" class="validate">
          <label for="disabled">Disabled</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          This is an inline input field:
          <div class="input-field inline">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="wrong" data-success="right">Email</label>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

You'll notice it's the same code from Materialize's Form page: http://materializecss.com/forms.html

One last note: I am working behind a proxy at work so I've saved jquery-3.2.1.min.js locally to the same directory I have the materialize js

[GitFlip]

I solved my issue above by following the solution here: https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined/37480521#37480521

[sivailangos]

Still has the problem if the text box has value as 0?

[lucasvmiguel]

Same error here

[cquinoneso]

Materialize.updateTextFields(); works fine!!!!

[zcaceres]

Can confirm in Vuejs: calling Materialize.updateTextFields() in the mounted() lifecycle hook works perfectly for dynamically generated forms.

[hadnazzar]

$(document).ready(function() { Materialize.updateTextFields(); });

Works perfectly.

[MatiasGallegos]

HTML:

<div class="input-field col s12 info_h">
   <input disabled value="" id="VTWEG" type="text" class="validate">
   <label for="VTWEG">Canal</label>
</div>

JQuery: ... success: function (data) {

        if (data !== null || data !== "") {
            $('#VTWEG').val(data.VTWEG);      
            $("label[for='VTWEG']").addClass("active");
        }            
    },..

[jaiswarvipin]

After value assigning loop (process) got over then execute Materialize.updateTextFields(); command and its work as expcated.

Thanks & Regards Jaiswar Vipin Kumar R.

[KAIXIE]

on ajax success callback write : window.M.updateTextFields();

[juliosilvacwb]

To update call the Materialize.updateTextFields () method; after updating the values, however call within a setTimeout (() => {}, 0) to ensure that you called the update after the values have been updated.

Ex.:

import * as M from 'materialize-css';

setCliente(cliente: Cliente) {
    this.cliente = cliente;
    setTimeout(() => { M.updateTextFields() }, 0)
}

[NamanJain51]

Hey..

Please add below script in your footer section and then see the magic!!!

This is worked for me.