1

Estou inserindo form no materialize, porém quando vou testar o formulário e insiro um texto parece que ficam trepados.

Exemplo: insiro um nome no first name porém o nome fica embaralhado com titulo do 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

1 Resposta 1

2

Fiz nesse trecho abaixo todo o código, com o 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>

e o resultado foi satisfatório.

4
  • Olá @virgilionovic Fiz de acordo com seu exemplo e continuou a mesma coisa. Tem algum Js ou Jquery? Commented 20/09/2016 às 0:45
  • @MarcosDeBarrosAzevedo, então, foi colocado no trecho ali logo acima que são os icones, o jQuery, e materialize com a fontes... !!! estranho hiem
    – novic
    Commented 20/09/2016 às 0:47
  • bem estranho. Abri um novo arquivo html e dei um control c control v e continuou igual. Commented 20/09/2016 às 0:49
  • 3
    Agora foi! esqueci de fechar </script> em dois trechos do head. Commented 20/09/2016 às 0:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .