Error in the bootstrap tab-content. Shows elements stacked in tab alternation

Navigation
0

Good afternoon. We are developing a website for a group of masters research, I am a scholarship holder, of the course of information systems, with little experience in web programming, who can help, for goodness! Using the nav-tabs and tab-content of the bootstrap, when you change the tabs, the content of the following tab is below the contents of the previous tab, as if the other elements were stacked under the new element.

The content of the tab-content is being created dynamically by the django views.py context variable.

Follow the code: 

<!-- MOSTRA AS ABAS DE PROJETOS EM ANDAMENTO E CONCLUÍDO -->
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" style="display:none;"  id="abas_projetos"><!--cria 2 abas de navegação-->
    <ul class="nav nav-tabs" >
        <li class="active"><a data-toggle="tab" href="#aba_projetos_em_andamento" onclick="alternar_abas()">
            Projetos Em Andamento</a>
        </li>

        <li><a data-toggle="tab" href="#aba_projetos_concluidos" onclick="alternar_abas()">
            Projetos Concluídos</a>
        </li>
    </ul>

    <div id="aba_projetos_em_andamento" class="tab-pane fade active in" > <!--cria o conteudo da aba de projetos concluidos -->

        {% for pesquisa in pesquisas_andamento.all %}

        <div class="tab-content" class="tabContent_projetos_em_andamento">
            <h4>
                <a href="#{{ pesquisa.id }}" data-toggle="collapse">
                    {{ pesquisa.titulo }}
                </a>
            </h4>
            <div id="{{ pesquisa.id}}" class="collapse">
                <strong>Ementa:</strong> {{ pesquisa.ementa }}
                <a href=" url app_name:page_name.html "> + info </a>
            </div>
        </div>
        {% endfor %}


    </div>

    <div id="aba_projetos_concluidos" class="tab-pane fade" > <!--cria o conteudo da aba de projetos concluidos -->
        {% for pesquisa in pesquisas_concluidas.all %}
            <div class="tab-content" class="tabContent_projetos_concluidos">
                <h4>
                    <a href="#{{ pesquisa.id}}" data-toggle="collapse">
                        {{ pesquisa.titulo }}
                    </a>
                </h4>
                <div id=" {{ pesquisa.id }} " class="collapse">
                    <strong>Ementa:</strong> {{ pesquisa.ementa }}
                </div>
            </div>
        {% endfor %}

    </div>
</div>   <!-- FECHA A DIV DAS ABAS DOS PROJETOS -->

The page print:

    
asked by anonymous 21.09.2018 / 18:31

1 answer

0

Good afternoon, thank you for your support. I got it sorted out. You had to explicitly put the display property in the 'tab-content' . style="display: block;". I think this property is not set by default. I've seen other comments on this! I was trying to get the property with javascript, but it was coming in blank. 

<ul class="nav nav-tabs" >
        <li class="active"><a data-toggle="tab" href="#aba_projetos_em_andamento" onclick="alternar_abas()">
            Projetos Em Andamento</a>
        </li>

        <li><a data-toggle="tab" href="#aba_projetos_concluidos" onclick="alternar_abas()">
            Projetos Concluídos</a>
        </li>
    </ul>
<div class="tab-content" id="tabContent_projetos_em_andamento"
                style="display:block;">
div class="tab-content" id="tabContent_projetos_concluidos"
                style="display:none;">

Calling the function, it compares the display: 

function alternar_abas(){
        var tab_content_projetos_em_andamento = document.getElementById("tabContent_projetos_em_andamento")
        var tab_content_projetos_concluidos = document.getElementById("tabContent_projetos_concluidos")
        console.log("antes de alternar display´s")
        console.log("tab_content_projetos_em_andamento.style.display : " + tab_content_projetos_em_andamento.style.display)
        console.log("tab_content_projetos_concluidos.style.display : " + tab_content_projetos_concluidos.style.display)

        if (tab_content_projetos_em_andamento.style.display == 'block'){
            tab_content_projetos_em_andamento.style.display = 'none'
            tab_content_projetos_concluidos.style.display = 'block'
        } else {
            tab_content_projetos_em_andamento.style.display = 'block'
            tab_content_projetos_concluidos.style.display = 'none'
        }

        console.log("depois de alternar display´s")
        console.log("tab_content_projetos_em_andamento.style.display : " + tab_content_projetos_em_andamento.style.display)
        console.log("tab_content_projetos_concluidos.style.display : " + tab_content_projetos_concluidos.style.display)
    }

Now showing right from the start

Now he is taking the height of the objects. Otherwise, it piled up. For what I researched I did not find many posts talking about this situation (from the stacking of tab-pane's content) ...

    
21.09.2018 / 19:27
Web.Config multiple domains Option menu back to login