Search code examples
javascripthtmlcsselectronmaterialize

All input forms in MaterializeCSS in electron look smashed

Okay, so when I follow the directions here for getting started with Materialize CSS, my input form always turns out like this:

the weirrd error My current index.html file is this:

<!DOCTYPE html>
<html>
  <head>
    <title>IRS</title>

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="node_modules/materialize-css/css/ghpages-materialize.css">

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="node_modules/materialize-css/js/materialize.js"></script>
  </head>

  <body>
    <div class="input-field">
      <input placeholder="Placeholder" id="first_name" type="text" class="validate">
      <label for="first_name">First Name</label>
    </div>
  </body>
</html>

My electron version is 1.6.6 and node is at 6.10.3

Solution

  • Add "active" class to the tag and try 

     <div class="input-field">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name" class="active">First Name</label>
        </div>

    if you want only label animation, remove the placeholder for the <input> tag

    Hope it works..