jQuery UI Tabs-hauteur automatique

Tout ce que vous avez à faire est de régler une min-height. (Il m'a fallu des siècles pour trouver la réponse à cette question .. J'espère que cela aide!).

Voici mon code qui fonctionne vraiment:

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

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

Après avoir lu sur la documentation, il semble que l'option n'est plus disponible. Cependant, il est très facile à reproduire cette fonctionnalité.

en Supposant que vos onglets sont disposées horizontalement:

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

l'exemple de gabriel m'a donné la bonne avance mais je n'ai pas réussi à la faire fonctionner exactement comme ça. Lorsque l'on regarde le exemple de code source de la documentation jQuery vous voyez que le code HTML est supposé ressembler à ceci:

<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>

Comme j'ai 3 onglets qui ont un contenu qui est plutôt statique, pour moi c'était suffisant pour régler la hauteur de tous les onglets à la hauteur de la plus haute, qui est #fragment-1 dans mon cas.

C'est le code qui ne ceci:

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

la réponse de Giannis est correcte pour obtenir la plus haute hauteur parmi les onglets, mais il manque le code pour appliquer réellement cette solution. Vous avez besoin d'ajouter un chemin pour réafficher le premier onglet (qui sera disparu par le code) et un moyen pour définir la hauteur de chacune des zones de contenu.

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);

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');
            });

je cherchais juste cette solution, et fixer une hauteur minimale est seulement bon si vous savez à quel point la hauteur minimale devrait être à l'avance.

au lieu de cela, je suis allé dans le css et j'ai changé la classe ui-tabs pour ajouter "overflow:auto;" comme ci-dessous

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

cela fonctionne pour moi EN FF12...Je n'ai pas essayé dans d'autres. Si cela fonctionne, vous pouvez créer une classe séparée pour préserver la fonctionnalité du stock et l'interchangeabilité theming etc

BTW-la raison pour laquelle vous peut - être besoin de dimensionnement dynamique est si vous chargez à partir D'Ajax, mais pas en utilisant la méthode de loader onglet, mais plutôt une autre fonction (leur méthode suppose que vous le contenu est tout venant d'une ressource url qui peut ne pas être suffisante en fonction de la façon dont avancé vous population dynamique est).

HTH

définir la hauteur minimale de tab et redimensionner la propriété à none...

exemple:

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

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');
});

Vérifier l'url:

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

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