1

Actualmente estoy empleando el siguiente código:

<div class="card">
    <div class="card-body">
        <div class="wizard-tab mb-4">
            <ul class="nav nav-tabs d-block d-sm-flex">
                <li class="nav-item mr-auto mb-4">
                    <a class="nav-link p-0 active" data-toggle="tab" href="#tab1"> 
                        <div class="d-flex">
                            <div class="mr-3 mb-0 h1">1</div>
                        </div>

                    </a>
                </li>
                <li class="nav-item mr-auto mb-4">
                    <a class="nav-link p-0" data-toggle="tab" href="#tab2">                                                    
                        <div class="d-flex">
                            <div class="mr-3 mb-0 h1">2</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane fade active show" id="tab1">
                <div class="form">
                    <p>Hola</p>
                    <button type="button" class="btn float-right btn-primary nexttab">Next</button>
                </div>
            </div>
            <div class="tab-pane fade" id="tab2">
                <div>
                    <p>Hola</p>
                    <div class="d-flex">
                       <button type="button" class="btn btn-primary prevtab">Previous</button>
                       <button type="button" class="btn btn-primary nexttab ml-auto">Next</button>
                    </div>
                </div>
            </div>
          </div>
    </div>
 </div>

El problema es que si lo coloco dentro de un modal, no funcionan los prev y next tabs al cliquear los correspondientes botones, sin embargo, si los ubico fuera del modal funcionan perfectamente. Adjunto el modal:

<div class="modal" v-if="modal">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
             <!-- MODAL HEADER -->
             <!-- MODAL BODY -->
                 <div class="modal-body">
                  <!--AQUI ESTOY INCRUSTANDO EL CARD ANTERIOR DE LOS NAVS -->
                 </div>
        </div>
    </div>
</div>

CSS del modal:

.modal{
    padding-right: 14px;
    display: list-item;
    overflow: auto;
    opacity: 1;
    background: rgba(4, 5, 10, 0.8);
}

Así que mi pregunta es cómo lograr solucionar y hacer que funcionen los botones dentro del dialog.

1 respuesta 1

0

A mí me pasó algo similar, al insertar una galería en un modal. Prueba con agregarle un id="prevtab" a tu botón, y que con este id trabaje JavaScript.

<button type="button" id="prevtab" class="btn btn-primary">Previous</button>

Si esto no te funciona, te va llevar mucho trabajo arreglando las rutas en tu estilo CSS; algo como: .modal .modal-body .cars card-body .tab-pane button.

1
  • No me funcionó con ese método :(, actualmente le tengo una solución parche que es cambiar mi v-if por v-show (ya que estoy usando Vue.js). Supongo que no es lo más óptimo, pero al menos ahí tiene el comportamiento que busco el 24 may. 2021 a las 16:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.