Question

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 1

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

Collapse Panel In Modal Issue

1 个答案: