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?
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.
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
À 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 });
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.
Régler la hauteur de la DIV fera l'affaire.
$(document).ready(function() {
$("#accordion").show().accordion({
autoHeight: false
});
$("#accordion div").css({ 'height': 'auto' });
});
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.
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
},
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.
Appelez simplement la méthode accordéons .resize()
, cela recalculera sa taille. http://docs.jquery.com/UI/Accordion#method-resize
pour moi faire suivre a travaillé avec précision.
$( "#accordion" ).accordion({
autoHeight: false,
});