Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

materialize css formulário não centraliza na página padrão

Estou utilizando o framework css materialize ao criar o formulário não consigo centralizar . Ao criar div , ele centraliza mais nao fica responsive fica todo modificado. Como corrigir?

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <title> ZEM </title>

  <link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">

<style>

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

main {
    flex: 1 0 auto;
  }

</style>
</head>

<body>

<!-- 

 .espaco{
   margin: 15px;
   width: 100%; 
  margin-left:495px;
 }

     -->
<nav>
    <div class="nav-wrapper container">
      <a href="home.html" class="brand-logo">Logo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">

                    <li><a href="quemsomos.html">Quem Somos</a></li>
                    <li><a href="corporativo.html">Corporativo</a></li>
                    <li><a href="ajuda.html">Ajuda</a></li>
                    <li><a href="contato.html">Contato</a></li>
                    <li><a href="acesso.html">Acesse</a></li>

      </ul>
      <ul class="side-nav" id="mobile-demo">

                    <li><a href="quemsomos.html">Quem Somos</a></li>
                    <li><a href="corporativo.html">Corporativo</a></li>
                    <li><a href="ajuda.html">Ajuda</a></li>
                    <li><a href="contato.html">Contato</a></li>
                    <li><a href="acesse.html">Acesse</a></li>

      </ul>
    </div>
 </nav>

<main>


  <div class="row">

  <br>
  <br>

  <h6> Em caso de dúvida ou solicitar oraçmento, por favor entre em contato conosco preenchendo o formulário abaixo.</h6>
  <br>
            <form class="col s10 ">


                  <div class="row">

                   <div class="input-field col s10">
                        <!-- <i class="material-icons prefix">account_circle</i> -->
                        <input id="icon_prefix" type="text" class="validate" required>
                        <label for="icon_prefix " >Nome Completo</label> 
                   </div>

                    <div class="input-field col s10">
                        <!-- <i class="material-icons prefix">account_circle</i> -->
                        <input id="icon_prefix" type="text" class="validate" required>
                        <label for="icon_prefix ">Telefone</label> 
                   </div>


                    <div class="input-field col s10">
                        <!-- <i class="material-icons prefix">account_circle</i> -->
                        <input id="icon_prefix" type="text" class="validate" required>
                        <label for="icon_prefix ">E-mail</label> 
                   </div>

                  <div class="input-field col s10" >

                    <select >
                      <option value="" disabled selected>Escolha uma opção</option>
                      <option value="1">Solicito orçamento</option>
                      <option value="2">Dúvidas</option>
                      <option value="3">Sistema com problema</option>
                      <option value="4">Aplicativo com aplicativo</option>
                      <option value="5">Sugestão</option>
                      <option value="5">Outros</option>


                    </select>
                  </div>


                <div class="input-field col s10">
                  <textarea id="textarea1" class="materialize-textarea" data-length="1000"></textarea>
                   <label for="textarea1"> Digite aqui sua mensagem </label>
                </div>


                <div class="input-field col s10 center">
                      <br>

                        <button class="btn waves-effect waves-light light-green darken-4" type="submit" name="action">Enviar<i class="material-icons right">send</i></button>
                </div>

        </div>


            </form>

   </div>


</main>




        <footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>

            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            © 2014 Copyright Text
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>

            </div>
          </div>
        </footer>         

  </div>   
 <!--  Scripts-->

    <script type="text/javascript" src ="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="materialize/js/materialize.min.js"></script>
    <script src="min/plugin-min.js"></script>



     <script>
    $( document ) .ready(function(){
      $(".button-collapse").sideNav();

    })
    </script>


     <script>

  $(document).ready(function() {
    $('select').material_select();
  });


    </script>






</body>





</html>
4 respostas

Na <div class="row"> que é a div que inicia o conteúdo do seu formulário, tente colocar a classe container, deixando assim:

<div class="row container">

Acredito que pela falta do container essa div não esteja se limitando no grid do framework.

Me avise depois de testar :)

Ola Thiago ,

modifiquei conforme falou ele da um pequeno espaçamento lateral não ficando totalmente no centro.

solução!

Nicolle, isso já é um padding que o Materialize inclui na classe .col

Repare que se vc tirar a classe col do <div class="input-field col s10">, deixando somente <div class="input-field">esse espaço vai sumir.

Deu certo Thiago ^^ obg