jQuery UI Tabs - Altura automática

Question

En las versiones anteriores de jQuery tabs había una opción para ajustar automáticamente la altura de la pestaña a la de la ficha más alta en el grupo que utilizó:

$('#container').tabs({ fxAutoHeight: true }); 

Sin embargo, esto no parece trabajar en jQuery UI 1.5.3.

¿Se ha eliminado esta opción? Si es así, ¿hay otra forma de obtener la misma funcionalidad?

Answer 1

Parece que no está ya allí, echa un vistazo a este plugin para la misma funcionalidad

Equal Heights Plugin

Answer 2

Después de leer the documentation, parece que esa opción ya no está disponible. Sin embargo, es muy fácil replicar esta funcionalidad.

Suponiendo que las pestañas están dispuestas horizontalmente:

$("ul.tabs a").css('height', $("ul.tabs").height()); 

Answer 3

var height = 0; 

$("#tabs .ui-widget-content").each(function(){ 
    $(this).removeClass('ui-tabs-hide'); 
     if(height < $(this).height()) 
      height = $(this).height(); 
    $(this).addClass('ui-tabs-hide'); 
}); 

Answer 4

El ejemplo de Gabriel me dio la pista correcta, pero no pude lograr que funcionara exactamente así. Al mirar el source code example de la documentación de jQuery que ver que el código HTML se supone que debe tener este aspecto:

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    ... 
</div> 

Como tengo 3 pestañas que tienen contenido que es más bien estática, para mí fue suficiente para establecer el altura de todas las pestañas a la altura de la más alta, que es # fragment-1 en mi caso.

Este es el código que hace esto:

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height()); 

Answer 5

La respuesta por Giannis es correcta para conseguir la altura más alta entre las pestañas, pero no se encuentra el código para aplicar realmente esa solución. Debe agregar una forma de volver a mostrar la primera pestaña (que desaparecerá con el código) y una forma de establecer la altura de cada una de las áreas de contenido.

var height = 0; 
//Get the highest height. 
$("#tables .ui-widget-content").each(function(){ 
    $(this).removeClass('ui-tabs-hide'); 
    var oheight = height; //used to identify tab 0 
    if(height < $(this).height()) 
    { 
     height = $(this).height(); 
    } 
    if(oheight != 0) 
    { 
     $(this).addClass('ui-tabs-hide'); 
    } 
}); 
//Apply it to each one... 
$("#tables .ui-widget-content").height(height); 

Answer 6

var biggestHeight = 0; 
jQuery.each($(this).find(".ui-tabs-panel"), 
      function (index, element) {  
       var needAppend = false; 
       if ($(element).hasClass('ui-tabs-hide')) { 
        $(element).removeClass('ui-tabs-hide'); 
        needAppend = true; 
       } 

       if ($(element).height() > biggestHeight) 
        biggestHeight = $(element).height(); 

       if (needAppend) 
        $(element).addClass('ui-tabs-hide'); 
      }); 

Answer 7

altura mínima pestaña Configurar y cambiar el tamaño de la propiedad a ninguno ...

ejemplo:

$("#tab").tabs().css({'resize':'none','min-height':'300px'}); 

Answer 8

Todo lo que tiene que hacer es fijar un min-height. (Me ha llevado años encontrar la respuesta a esto ... ¡Espero que ayude!).

Aquí está mi código que realmente funciona:

$("#tabs").tabs().css({ 
    'min-height': '400px', 
    'overflow': 'auto' 
}); 

Answer 9

que solo estaba buscando para esta solución, y el establecimiento de un min-height sólo es bueno si se sabe qué tan alto la altura min debe ser por adelantado.

En su lugar, entré al css y cambié la clase ui-tabs para agregar "overflow: auto;"; como a continuación

.ui-tabs { overflow: auto; position: relative; padding: .2em; zoom: 1; } 

Esto funciona para mí en FF12 ... No lo he probado en otros.Si esto funciona, es posible que desee crear una clase separada para preservar la funcionalidad de stock y la intercambiabilidad de temas, etc.

BTW - la razón por la que podría necesitar un tamaño dinámico es si está cargando desde Ajax, pero no utilizando el método de cargador de pestañas, sino más bien otra función (su método supone que su contenido proviene de un solo recurso de la URL, que puede no ser suficiente según cuán avanzada sea su población dinámica).

HTH

Answer 10

En jQuery 1.9, utilice el atributo heightStyle (docs here)

$(".selector").tabs({ heightStyle: "auto" }); 

Answer 11

compruebe la URL:

http://api.jqueryui.com/tabs/#option-heightStyle

$("#tabs").tabs({ heightStyle: "fill" });