web-dev-qa-db-fra.com

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

Dans mon interface utilisateur, j'ai une configuration d'accordéon comme celle-ci:

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

    // More sections
</div>

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

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

J'ai essayé d'ajouter des styles min-height à la div object_list, et les divs content en vain. L'ajout de min-height aux divs internes a en quelque sorte fonctionné, mais cela a gâché les animations de l'accordéon, et l'ajouter à la div object_list n'a absolument rien fait.

Comment obtenir une taille raisonnable dans les sections de contenu même s'il n'y a pas assez de contenu pour remplir ces sections?

javascriptjqueryjquery-uiaccordion
37
KallDrexx

Lorsque vous déclarez le div de contrôle accordéon, vous pouvez mettre une hauteur dans la balise de style pour le div. Ensuite, vous pouvez définir la propriété fillSpace: true pour forcer le contrôle accordéon à remplir cet espace div quel qu'il soit. Cela signifie que vous pouvez définir la hauteur qui vous convient le mieux pour votre page. Vous pouvez ensuite changer la hauteur de la div lorsque vous ajoutez votre code

Si vous souhaitez que l'accordéon se redimensionne de manière dynamique sur le contenu qu'il contient, vous pouvez effectuer l'astuce suivante publiée sur le site Web 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.

34
ICodeForCoffee

autoHeight était obsolète dans 1.9 et supprimé dans 1.10 .

Utilisation:

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

pour redimensionner automatiquement votre div.

METTRE À JOUR:

Je vois que ce poste est encore très actif, alors j’ai décidé de m’assurer que ma réponse est toujours valide. Il semble que cela ne fonctionne plus dans jQuery UI 1.11 . Il note que la propriété [content] est obsolète et qu'il est préférable d'utiliser [panel]. Rendre l'extrait de code ressemble maintenant à ceci:

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

JE N'AI PAS ENCORE TESTE CELUI-CI, VENU DE TROUVER, ET RETOURNERA ET SUPPRIMERA CE COMMENTAIRE LORSQUE J'aurais le temps de tester

66
Keerigan

À partir de la documentation il semblerait que vous deviez définir

clearStyle: true

...et aussi

autoHeight: false

Je crois que l’utilisation de clearStyle vous permet d’ajouter du contenu de manière dynamique sans que Accordion ne vous gêne.

Alors essayez ceci ...

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

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 souhaité.

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

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

Si les dimensions de votre page changent de manière dynamique et que vous devez recalculer la taille de votre accordéon, vous devez actualiser votre accordéon à l'aide de la méthode refresh:

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

Ceci est préférable car la méthode resize est maintenant obsolète.

15
nullability

Régler la hauteur de la DIV fera l'affaire. 

$(document).ready(function() {

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

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

Désactiver auto fonctionnera ... (avec toute chaîne autre que auto ou remplissage), telle que la solution indiquant d'utiliser "panel". Mais...

Cela revient à insérer n'importe quelle chaîne de caractères pour "heightStyle". Le "heightStyle" que vous recherchez est "content".

(valeurs de l'option "heightStyle" dans jQuery UI 1.12)

  • "auto": Tous les panneaux seront réglés à la hauteur du plus grand des panneaux.
  • "fill": Développez la hauteur disponible en fonction de la hauteur du parent de l'accordéon.
  • "content": chaque panneau sera aussi grand que son contenu.

Exemple: https://jsfiddle.net/qkxyodpq/5/

J'espère que cela pourra aider.

1
phyatt

Dans votre jquery-ui.js, recherchez la section suivante et remplacez heightstyle: "auto" par heightstyle: "content" afin que le fichier mis à jour ressemble à ceci.

var accordion = $.widget( "ui.accordion", {
  version: "1.11.4",
  options: {
    active: 0,
    animate: {},
    collapsible: false,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",
    icons: {
        activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"
    },

    // callbacks
    activate: null,
    beforeActivate: null
},
1
Munish Kumar

J'ai récemment mis en place un accordéon qui récupère le contenu via ajax quand un onglet est activé et rencontre le même problème. J'ai essayé d'utiliser certaines des suggestions publiées ici, mais le panneau n'a jamais été agrandi correctement tant que je n'ai pas défini le heightStyle au contenu.

$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});

J'utilise jQuery-UI version 1.10.4.

0
Robbert

Appelez simplement la méthode accordéons .resize(), cela recalculera sa taille. http://docs.jquery.com/UI/Accordion#method-resize

0
Sean Kinsey

pour moi faire suivre a travaillé avec précision.

$( "#accordion" ).accordion({
    autoHeight: false,

});

0
R T