Search code examples
jqueryhtmlcssmaterialize

All tabs appearing when updating or load page Materialize

I'm using materialize. Does anyone know why this happens? When I refresh or I load the page, a portion of the following tabs appear and then disappear when you finish loading. I want to prevent this from happening. I tried some things but I did not succeed, if this is normal please answer me.

enter image description here

enter image description here

HTML

<section class="section-cadastro blue-grey darken-4 z-depth-5 row">
    <div class="col s12">
        <h4>Escolha o tipo de cadastro</h4>
        <ul id="tabs-swipe-demo" class="tabs">
            <li class="tab col s3"><a class="active" href="#test-swipe-1">Test 1</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-2">Test 2</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-3">Test 3</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-4">Test 4</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-5">Test 5</a></li>
        </ul>
        <div id="test-swipe-1" class="col s12 normal-user">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col l6 m6 s12">
                        <input id="first_name" type="text" class="validate">
                        <label for="first_name">Primeiro Nome</label>
                    </div>
                    <div class="input-field col l6 m6 s12">
                        <input id="last_name" type="text" class="validate">
                        <label for="last_name">Segundo Nome</label>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s6">
                        <input id="password" type="password" class="validate">
                        <label for="password">Senha</label>
                    </div>

                    <div class="input-field col s6">
                        <input id="confirm_password" type="password" class="validate">
                        <label for="confirm_password">Confirmar Senha</label>
                    </div>
                </div>


                <div class="row">
                    <div class="input-field col s4">
                        <input id="email" type="email" class="validate">
                        <label for="email">Email</label>
                    </div>

                    <div class="cad-select input-field col l4 m6 s12">
                        <select>
                          <option value="" disabled selected>Função </option>
                          <option value="1">Compositor</option>
                          <option value="2">Cantor</option>
                          <option value="3">Bateirista</option>
                           <option value="4"></option>
                        </select>
                        <label>Escolha sua Função</label>
                    </div>                  

                    <div class="cad-select input-field col l4 m6 s12">
                        <select>
                          <option value="" disabled selected>Instrumento </option>
                          <option value="1">Gaita</option>
                          <option value="2">Violino</option>
                          <option value="3">Violão</option>
                          <option value="4">Bateria</option>
                          <option value="5"></option>
                        </select>
                        <label>Escolha seu Instrumento</label>
                    </div>      
                </div>                                                          

                <div class="cad-select input-field col s12 center">
                    <a class="blue btn btn-login">
                       Cadastrar-se
                    </a> 
                </div>
            </form>
        </div>
        <div id="test-swipe-2" class="col s12 red">Test 2</div>
        <div id="test-swipe-3" class="col s12 blue">Test 3</div>
        <div id="test-swipe-4" class="col s12 green">Test 4</div>
        <div id="test-swipe-5" class="col s12 grey">Test 5</div>
    </div>
</section>

CSS

.section-cadastro .tabs-content.carousel .carousel-item{ 
    height: 550px;
}
.section-cadastro{
    padding: 0px 10px 30px 10px;
    position: relative;
    width: 100%;
}
.section-cadastro.row{
    padding: 0 !important;
}
.section-cadastro > .col{
    padding: 0 !important;
}

JQUERY

$(document).ready( function(){
   $('ul.tabs').tabs({
      swipeable: true
   }); // Tabs              
})
Solution

  • This is happening because the tabs classes created by material js library which is taking time on load.

    To solve this issue you can use a custom class of yours in all the tabs and set opacity:0 to that class.

    .custom {
  opacity: 0;
}

    Updated Fiddle