Error in bootstrap tab-content. Shows stacked elements in tabs toggle

Asked

Viewed 365 times

0

Good afternoon. We are developing a website for a research group of the master’s degree, I am a fellow, of the course of information systems, with little experience in web programming, who can help, out of the kindness! Using the Nav-tabs and tab-content of the bootstrap, when changing tabs, the contents of the following tab are below the contents of the previous tab, as if the other elements were stacked under the new element.

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

Follows 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 print of the page:

inserir a descrição da imagem aqui

mostrando como o layout é desenhado na tela

html css twitter-bootstrap bootstrap-3 front-end

  • Dude I believe your problem is with regard to the "fade" between one content and another. I don’t know the dynamics or the CSS you used, but if you are using visibility or opacity 0 this error may happen, you need to set display:none in the contents of the first tab when displaying the contents of the second tab.

  • thank hugocsl have to resolve using the same display property, but first it was necessary to 'set' it explicitly in the tag statement! Only as soon as it was possible to manipulate this property, otherwise it becomes 'Undefined'.

1 answer

0

Good afternoon, I appreciate the support. I managed to resolve. It was necessary to explicitly put the display property in the tab-content'. style="display:block;". I don’t think this property is configured by default. I’ve seen other comments on this! I was trying to get the property with javascript, but it was coming 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 you’re showing off on the right start inserir a descrição da imagem aqui

Now he’s taking the height (height) of objects. Otherwise, he’s stacking. From what I researched I did not find many posts talking about this situation (from the stacking of contents of tab-panes s)...

Browser other questions tagged html css twitter-bootstrap bootstrap-3 front-end

You are not signed in. Login or sign up in order to post.