All tabs appearing when updating page materialize

2

Does anyone know why this happens? When I refresh the page it appears a part of the following tabs and then disappears when it finishes loading. I want to prevent this from happening.

HTML

<sectionclass="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;
}
    
asked by anonymous 30.01.2018 / 02:16

1 answer

1

Monroe if you notice the Materialize website itself if you give F5 in the documentation of the Tabs you will see that until then this Bug appears. link

ButInoticedthatifyouputalltheMaterializeCDNswithrel="preload" into the <head> of the page will have a small improvement. But unfortunately even being 150ms still to see the colors blinking

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<script rel="preload" src="https://code.jquery.com/jquery-3.2.1.min.js"as="script"></script>
<script rel="preload" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"as="script"></script>

Result:

Butallisnotlost.WithCSSwecanadvanceabehaviorofthisMaterializeTabscompiler.Noticetheimagethatitplacesadisplay:none;onalltabsthatarenotactive.

ThewayImanagedtogetridofthisbugistogetaheadofmyselfandputthosedisplay:none;onhandbyhavingtowaitforthepagetoloadalltheJStomakeithappen.

NotethatinthisSnippetBugdoesnotappearandTabsworknormally

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <script rel="preload" src="https://code.jquery.com/jquery-3.2.1.min.js"as="script"></script>
    <script rel="preload" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"as="script"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    
    .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;
    }
    
</style>
</head>
<body>
    
<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 s2"><a class="active" href="#test-swipe-1">Test 1</a></li>
            <li class="tab col s2"><a class="indicator-custom" href="#test-swipe-2">Test 2</a></li>
            <li class="tab col s2"><a class="indicator-custom" href="#test-swipe-3">Test 3</a></li>
            <li class="tab col s2"><a class="indicator-custom" href="#test-swipe-4">Test 4</a></li>
            <li class="tab col s2"><a class="indicator-custom" href="#test-swipe-5">Test 5</a></li>
            <li class="tab col s2"><a class="indicator-custom" href="#test-swipe-6">Test 6</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" style="display: none">Test 2</div>
        <div id="test-swipe-3" class="col s12 blue" style="display: none">Test 3</div>
        <div id="test-swipe-4" class="col s12 green" style="display: none">Test 4</div>
        <div id="test-swipe-5" class="col s12 grey" style="display: none">Test 5</div>
        <div id="test-swipe-6" class="col s12 red" style="display: none">Test 6</div>

    </div>
</section>
    
</body>
</html>
    
30.01.2018 / 12:32