Tengo pestañas de arranque como las siguientes:
<ul class="nav nav-tabs"> <li><a data-toggle="tab" href="#home">Tab home</a></li> <li><a data-toggle="tab" href="#menu1">Tab menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Tab menu 2</a> </li> <div class="input-group" style="margin-bottom: 0 !important;margin-top: 5px;padding-left:50px;"> <input type="text" class="form-control txtSearch" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default btnSearchAgain" type="button" style="border: 1px #cfcfcf solid !important;padding: 6px !important;">Search</button> </span> </div> </ul>Y las pestañas en sí se ven así:
<div id="home" class="tab-pane fade in"> </div> <div id="menu1" class="tab-pane fade "> </div> <div id="menu1" class="tab-pane fade "> </div>Como puede ver, ninguna de las pestañas tiene una clase activa inicialmente... Y una de ellas TIENE que tener una clase activa para mostrarla.
Si agrego una clase activa a la pestaña de inicio, digamos... Luego, cuando hago clic en otras pestañas, su altura no se reduce ni se extiende de acuerdo con el contenido de la pestaña. En cambio, las otras 2 pestañas tienen la altura de la primera pestaña (que es enorme) si lo hago así:
<div id="home" class="tab-pane fade in active"> </div> <div id="menu1" class="tab-pane fade "> </div> <div id="menu1" class="tab-pane fade "> </div>Tenga en cuenta que agregué la clase activa a la primera pestaña ...
Mi pregunta es, ¿cómo puedo hacer que todas las pestañas cambien de tamaño automáticamente al contenido con el que se llenan cuando se hace clic en ellas?
Si no les agrego ninguna clase activa, entonces la opción de cambio de tamaño funciona, sin embargo, si les agrego a través de HTML o jQuery, entonces tengo problemas y la opción de cambio de tamaño no funciona.
He intentado esto también en jQuery:
$('.nav-tabs a[href="#home"]').tab('show');La primera pestaña de inicio aparece cuando se carga la página, pero nuevamente me enfrento al mismo problema, al hacer clic en otras 2 pestañas, mantienen la misma altura que la primera pestaña, y el desplazamiento horizontal tiene una milla de largo ...
Qué puedo hacer para arreglar esto ??
Parece que te falta el contenedor requerido para el panel de contenido de pestañas:
<div class="tab-content">
Envolver el contenido de sus pestañas con eso solucionará el problema, su marcado debe ser como:
<div class="tab-content"> <div id="home" class="tab-pane fade in active"> ... </div> <div id="menu1" class="tab-pane fade"> ... </div> <div id="menu2" class="tab-pane fade"> ... </div> </div>