Comment régler la hauteur d'un accordéon jQuery UI ?

Question

Dans mon interface utilisateur, j'ai une configuration en accordéon comme ceci :

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

L'accordéon fonctionne correctement lorsqu'il est formé pour la première fois, et il semble bien s'adapter au contenu de chacune des sections. Toutefois, si j'ajoute du contenu supplémentaire dans l'accordéon après l'appel .accordion() (via ajax), la partie intérieure de la section finit par déborder.

Étant donné que l'accordéon est formé avec presque aucun contenu, toutes les divisions internes sont extrêmement petites, et donc le contenu déborde et vous obtenez des accordéons avec des barres de défilement à l'intérieur avec presque aucune zone de visualisation.

J'ai essayé d'ajouter des styles de hauteur minimale à la division object_list et aux divisions de contenu, sans succès. L'ajout de la hauteur minimale aux divisions internes a fonctionné, mais a perturbé les animations de l'accordéon, et l'ajout de la hauteur minimale à la division object_list n'a absolument rien donné.

Comment puis-je obtenir une taille raisonnable des sections de contenu même s'il n'y a pas assez de contenu pour remplir ces sections ?

Answer 1

AutoHeight a été déprécié dans 1.9 et supprimé en 1.10 .

Utilisez :

$('#id').accordion({heightStyle: 'content'});

pour dimensionner automatiquement votre div interne.

UPDATE :

Je vois que ce message est encore très actif, alors j'ai décidé de m'assurer que ma réponse est toujours valable. Il semble que cela ne fonctionne plus dans jQuery UI. 1.11 . Il indique que la propriété [content] a été supprimée et qu'il faut utiliser [panel] à la place. L'extrait de code ressemble maintenant à quelque chose comme ceci :

$('#id').accordion({heightStyle: 'panel'});

JE NE L'AI PAS ENCORE TESTÉ, JE VIENS DE LE DÉCOUVRIR, ET JE REVIENDRAI ET ENLÈVERAI CE COMMENTAIRE QUAND J'AURAI LE TEMPS DE LE TESTER

Answer 2

Lorsque vous déclarez la div de contrôle de l'accordéon, vous pouvez définir une hauteur dans la balise de style de la div. Vous pouvez ensuite définir la balise fillSpace : true pour obliger le contrôle accordéon à remplir cet espace div quoi qu'il arrive. Cela signifie que vous pouvez définir la hauteur qui convient le mieux à votre page. Vous pouvez ensuite modifier la hauteur de la division en ajoutant le code suivant

Si vous souhaitez que l'accordéon s'adapte dynamiquement au contenu qu'il contient en fonction des besoins, vous pouvez utiliser l'astuce suivante publié sur le site de jQuery UI .

//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );

Cela signifie que lorsque vous sélectionnez une zone contenant beaucoup de texte, l'accordéon la recalcule.

Answer 3

Extrait de la documentation il semble que tu doives mettre

clearStyle: true

...et aussi

autoHeight: false

Je pense que l'utilisation de clearStyle vous permet d'ajouter du contenu de manière dynamique sans que l'accordéon ne soit gênant.

Alors, essayez ceci...

$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });

Answer 4

Il semble que toutes les réponses ici utilisent maintenant des options obsolètes.

Avec la dernière version de jQuery UI (1.10.x), vous devez initialiser votre accordéon avec heightStyle: "fill" pour obtenir l'effet escompté

$(".selector").accordion({ heightStyle: "fill" });

Pour en savoir plus, consultez la documentation sur l'API jQuery UI ici : http://api.jqueryui.com/accordion/#option-heightStyle

Si les dimensions de votre page changent de façon dynamique et que vous devez recalculer la taille de votre accordéon, vous devez rafraîchir votre accordéon à l'aide de la commande refresh méthode :

$(".selector").accordion("refresh");

Cette solution est préférable car le resize est désormais obsolète.

Answer 5

Le réglage de la hauteur du DIV fera l'affaire.

$(document).ready(function() {

    $("#accordion").show().accordion({
        autoHeight: false
    });

    $("#accordion div").css({ 'height': 'auto' });
});