Gabriel Silva Gabriel Silva - 3 months ago 8
HTML Question

Collapse Panel In Modal Issue

Folks!

I'm trying to use collapse panels inside a modal but, when I click on it, the modal's layout become broken, including the second panel.

Here's the code:

`

<div id="precos" class="modal fade topo" role="dialog">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Preços</h4>
<ul class='nav nav-tabs nav-justified' id='Precos_tab' data-tabs='tabs'>
<li role='presentation' class='active'><a href="#" data-target="#temporada" data-toggle="tab">Temporada</a></li>
<li role='presentation'><a href="#" data-target="#baixa" data-toggle="tab">Baixa Temporada</a></li>
<li role='presentation'><a href="#" data-target="#natal" data-toggle="tab">Natal</a></li>
<li role='presentation'><a href="#" data-target="#ano_novo" data-toggle="tab">Ano Novo</a></li>
</ul>
</div>
<div class="modal-body">

<div class='tab-content' id='minhas-tabs'>
<div class='tab-pane active' id="temporada">
<div class='panel-group' id="#ValorTemporada">
<div class='panel panel-default'>
<div class='panel-heading'>
<a href="#ValorTemporada" data-target='#PilotisTemp' data-toggle='collapse' data-parent='#ValorTemporada'>
<h3 class='panel-title'>
<i class='glyphicon glyphicon-chevron-right'></i>
Pilotis
</h3>
</a>
</div>
<div class='panel-collapse collapse' id='PilotisTemp'>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Vagas de Carro</span>
</div>
<div class='col-md-3 desc_pack'>
02
</div>

</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Mínimo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
06
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Máximo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
10
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Valor Associados</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 65,00
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Não Associado</span>
</div>
<div class='col-md-5 desc_pack'>
Indisponível
</div>
</div>
</div>
</div>
<div class='panel panel-default'>
<div class='panel-heading'>
<a href="#ValorTemporada" data-target='#CasaTemp' data-toggle='collapse' data-parent='#ValorTemporada'>
<h3 class='panel-title'>
<i class='glyphicon glyphicon-chevron-right'></i>
Casa
</h3>
</a>
</div>
<div class='panel-collapse collapse' id='CasaTemp'>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Vagas de Carro</span>
</div>
<div class='col-md-3 desc_pack'>
02
</div>

</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Mínimo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
06
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Máximo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
10
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Valor Associados</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 35,00
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Não Associado</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 58,00
</div>
</div>
</div>
</div>
</div>
</div>
<div class='tab-pane fade' id="baixa">
baixa
</div>
<div class='tab-pane fade' id="natal">
natal
</div>
<div class='tab-pane fade' id="ano_novo">
ano novo
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>


`

What i'm doing wrong?

I've tried the "row" class and "col-md-*" class but nothing worked.

Answer

Use the following code... or simply replace the panel-collapse class with panel-body

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#precos">click me</button>
    <div id="precos" class="modal fade topo" role="dialog">
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Preços</h4>
                    <ul class='nav nav-tabs nav-justified' id='Precos_tab' data-tabs='tabs'>
                        <li role='presentation' class='active'><a href="#" data-target="#temporada" data-toggle="tab">Temporada</a></li>
                        <li role='presentation'><a href="#" data-target="#baixa" data-toggle="tab">Baixa Temporada</a></li>
                        <li role='presentation'><a href="#" data-target="#natal" data-toggle="tab">Natal</a></li>
                        <li role='presentation'><a href="#" data-target="#ano_novo" data-toggle="tab">Ano Novo</a></li>
                    </ul>
                </div>
                <div class="modal-body">

                    <div class='tab-content' id='minhas-tabs'>
                        <div class='tab-pane active' id="temporada">
                        <div class='panel-group' id="#ValorTemporada">
        <div class='panel panel-default'>
            <div class='panel-heading' data-target='#PilotisTemp' data-toggle='collapse'>
                <a href="#">
                    <h3 class='panel-title'>
                        <i class='glyphicon glyphicon-chevron-right'></i>
                        Pilotis
                    </h3>
                </a>
            </div>
            <div class='panel-body collapse' id='PilotisTemp'>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-9 tipo_desc'>
                        <span class='titulo'>Vagas de Carro</span>
                    </div>
                    <div class='col-md-3 desc_pack'>
                        02
                    </div>

                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-9 tipo_desc'>
                        <span class='titulo'>Mínimo de Hóspedes</span>
                    </div>
                    <div class='col-md-3 desc_pack'>
                        06
                    </div>
                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-9 tipo_desc'>
                        <span class='titulo'>Máximo de Hóspedes</span>
                    </div>
                    <div class='col-md-3 desc_pack'>
                        10
                    </div>
                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-7 tipo_desc'>
                        <span class='titulo'>Valor Associados</span>
                    </div>
                    <div class='col-md-5 desc_pack'>
                        R$ 65,00
                    </div>
                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-7 tipo_desc'>
                        <span class='titulo'>Não Associado</span>
                    </div>
                    <div class='col-md-5 desc_pack'>
                        Indisponível
                    </div>
                </div>
            </div>
        </div>
        <div class='panel panel-default'>
            <div class='panel-heading' data-target='#CasaTemp' data-toggle='collapse'>
                <a href="#">
                    <h3 class='panel-title'>
                        <i class='glyphicon glyphicon-chevron-right'></i>
                        Casa
                    </h3>
                </a>
            </div>
            <div class='panel-body collapse' id='CasaTemp'>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-9 tipo_desc'>
                        <span class='titulo'>Vagas de Carro</span>
                    </div>
                    <div class='col-md-3 desc_pack'>
                        02
                    </div>

                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-9 tipo_desc'>
                        <span class='titulo'>Mínimo de Hóspedes</span>
                    </div>
                    <div class='col-md-3 desc_pack'>
                        06
                    </div>
                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-9 tipo_desc'>
                        <span class='titulo'>Máximo de Hóspedes</span>
                    </div>
                    <div class='col-md-3 desc_pack'>
                        10
                    </div>
                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-7 tipo_desc'>
                        <span class='titulo'>Valor Associados</span>
                    </div>
                    <div class='col-md-5 desc_pack'>
                        R$ 35,00
                    </div>
                </div>
                <div class='col-xs-6 col-md-6'>
                    <div class='col-md-7 tipo_desc'>
                        <span class='titulo'>Não Associado</span>
                    </div>
                    <div class='col-md-5 desc_pack'>
                        R$ 58,00
                    </div>
                </div>
            </div>
        </div>
    </div>
                        </div>
                        <div class='tab-pane fade' id="baixa">
                        baixa
                        </div>
                        <div class='tab-pane fade' id="natal">
                        natal
                        </div>
                        <div class='tab-pane fade' id="ano_novo">
                        ano novo
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>     
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I hope this helps