Shuffled fields in a form using Materialize

Asked

Viewed 481 times

1

I’m inserting form in the materialize, but when I test the form and insert a text it looks like they get fucked.

Example: I enter a name in first name but the name is scrambled with the title of form.

<body>

  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" class="validate">
          <label for="icon_prefix">First Name</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">phone</i>
          <input id="icon_telephone" type="tel" class="validate">
          <label for="icon_telephone">Telephone</label>
        </div>
      </div>
    </form>
  </div>



</body>

inserir a descrição da imagem aqui

css form materialize

1 answer

2

I did in this section below all the code, with the materialize:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/fonts/roboto/Roboto-Thin.woff"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/fonts/roboto/Roboto-Thin.woff2"></script>

<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">account_circle</i>
        <input id="icon_prefix" type="text" class="validate">
        <label for="icon_prefix">First Name</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">phone</i>
        <input id="icon_telephone" type="tel" class="validate">
        <label for="icon_telephone">Telephone</label>
      </div>
    </div>
  </form>
</div>

and the result was satisfactory.

  • Hello @virgilionovic I did according to your example and continued the same thing. Have some Js or Jquery?

  • @Marcosdebarrosazevedo, then, was placed in the section there just above that are the icones, the jQuery, and materialize with the fountains... !!! strange hiem

  • very strange. I opened a new html file and gave a control c control v and remained the same.

  • 3

    Now it’s gone! I forgot to close </script> in two snippets of head.

Browser other questions tagged css form materialize

You are not signed in. Login or sign up in order to post.