Comment pouvez-vous régler la hauteur de jQuery UI accordion?

Dans mon INTERFACE j'ai un accordéon de configuration 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é, et il semble s'ajuster de lui-même pour le contenu à l'intérieur de chacune des sections. Cependant, si je puis ajouter plus de contenu dans l'accordéon après la .accordéon() appel (via ajax), à l'intérieur de la section finit par déborder.

Depuis l'accordéon est en cours de création avec presque pas de contenu, tous à l'intérieur divs 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 pas de zone de visualisation.

J'ai tenté d'ajouter min-hauteur de styles pour les object_list div, et le contenu divs en vain. Ajouter le min-height à l'intérieur des divs sorte de travaillé, mais il a sali l'accordéon animations, et de l'ajouter à la object_list div n'a absolument rien fait.

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

InformationsquelleAutor KallDrexx | 2010-05-15

34

Lorsque vous déclarez l'accordéon de contrôle de la div, vous pouvez mettre une hauteur dans le style pour la balise div. Vous pouvez ensuite régler le fillSpace: vrai propriété à la force de l'accordéon de contrôle pour remplir le div de l'espace, peu importe quoi. Cela signifie que vous pouvez définir la hauteur de ce qui fonctionne le mieux pour vous page. Vous pouvez alors changer la hauteur de la div lorsque vous ajoutez votre code

Si vous voulez de l'accordéon à redimensionner dynamiquement le contenu qu'il contient en tant que de besoin, vous pouvez effectuer les opérations suivantes truc 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 avec beaucoup de texte, l'accordéon va recalculer il.
- Je ne comprends vraiment pas pourquoi autoHeight = false permet de travailler (me semble qu'il doit se comporter à l'opposé), mais cela a fonctionné. Cheers!
- J'ai la même requête...où dois-je écrire le //getter et setter code
- directement dans votre partie de javascript de votre accordéon. Vous venez de recevoir l'attribut/option autoHeight et de définir qu'elle est fausse.
- Cette option a été déconseillée chez 1,9 et combiné avec l' clearStyle et fillSpace options. Vous devez maintenant utiliser la nouvelle heightStyle option. Voir ma réponse pour plus d'info.
- 'heightStyle': 'content' œuvres. Voir stackoverflow.com/a/49077271/999943
InformationsquelleAutor ICodeForCoffee
67

autoHeight a été dépréciée en 1.9, et retiré dans 1.10.

Utilisation:
```
$('#id').accordion({heightStyle: 'content'});
```
automatique de la taille de votre intérieur div.

Mise à JOUR:

Je vois que c'est encore un post, j'ai donc décidé de m'assurer que ma réponse est toujours valide. Il semble que cela peut ne plus fonctionner en jQuery UI 1.11. Il note que le [contenu] propriété a été abandonné, et à utiliser [panneau] à la place. Prise de l'extrait de code maintenant ressembler à quelque chose de plus comme ceci:
```
$('#id').accordion({heightStyle: 'panel'});
```
JE N'AI PAS ENCORE TESTÉ, JUSTE TROUVÉ, ET SERA DE RETOUR ET SUPPRIMER CE COMMENTAIRE QUAND J'AURAI LE TEMPS DE TESTER
- réponse correcte pour les dernières versions, je me demande pourquoi ce n'est pas le comportement par défaut...
- J'ai juste commencé à l'aide de ce plugin et cette option n'a résoudre le problème j'ai eu avec jqueryUI réglage de la hauteur du contenu pour le plus haut du panneau. Merci
- dans la version 1.11.4 j'ai encore besoin dans les définitions de sous "options": heightStyle: "content", de fixer la hauteur standard 500px. Merci!
- J'ai juste utilisé heightStyle: "content" et il fonctionne très bien pour les hauteurs des panneaux sont fixés sur la base de leur contenu. heightStyle: 'panel' fonctionne aussi bien.
- Merci pour votre post. J'ai vérifié les docs, et panel n'existe pas... Voir ma réponse ci-dessous pour plus de détails. stackoverflow.com/a/49077271/999943
InformationsquelleAutor Keerigan
18

À partir de la documentation il semble que vous aurez besoin de mettre en
```
clearStyle: true
```
...et aussi
```
autoHeight: false
```
Je crois que l'utilisation de clearStyle permet d'ajouter dynamiquement le contenu sans l'Accordéon obtenir de la manière.

Alors essayez cette...
```
$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });
```
- cette une a fonctionné pour moi! 🙂
- travaillé comme un champion
- a très bien fonctionné. Je vous remercie.
InformationsquelleAutor Ben Coppock
15

Elle ressemble à toutes les réponses ici sont maintenant en utilisant des options dépréciées.

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" });
```
Vous pouvez en lire plus à l'jQuery UI API docs ici: http://api.jqueryui.com/accordion/#option-heightStyle

Si votre page dimensions changent de manière dynamique et vous avez besoin de recalculer votre accordéon taille, vous devez actualiser votre accordéon à l'aide de la refresh méthode:
```
$(".selector").accordion("refresh");
```
C'est préférable que l' resize méthode est maintenant obsolète.
- a travaillé pour moi. Le "heightStyle" attribut est la clé pour v1.10+
- Le "rafraîchir" la solution a résolu mon problème comme je l'ai été chargement de contenu dans l'accordéon après qu'il a été initialisé.
InformationsquelleAutor nullability

Réglage de la DIV, la hauteur d'fera l'affaire.

$(document).ready(function() {

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

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

InformationsquelleAutor Arun Banik

2

Désactivation automatique fonctionne... (avec une chaîne en plus de l'auto ou de remplissage) comme la solution à raconter à utiliser le "panneau de configuration". Mais...

Qui est le même que tous les déchets de la chaîne de "heightStyle". Le "heightStyle" vous êtes à la recherche pour est "content".
(valeurs pour l'option "heightStyle" en jQuery UI 1.12)
- "auto": Tous les panneaux seront à la hauteur de la plus haute du panneau.
- "fill": Développer à la hauteur en fonction de l'accordéon parent hauteur.
- "content": Chaque panneau sera seulement aussi grand que son contenu.
Exemple:
https://jsfiddle.net/qkxyodpq/5/

Espère que ça aide.
- ce doit être marqué comme réponse, comme actuellement marqué un stackoverflow.com/a/2841187/158328 ne fonctionne plus.
InformationsquelleAutor phyatt

Dans votre jquery-ui.js recherchez la section suivante et modifier heightstyle: "auto" à heightstyle: "content" donc la mise à jour du fichier 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
},

InformationsquelleAutor Munish Kumar

0

Il suffit d'appeler le accordéons .resize() méthode, cela va recalculer sa taille.
http://docs.jquery.com/UI/Accordion#method-resize
- Vous devez définir le fillSpace: vrai et de modifier la hauteur du conteneur, afin de faire de .resize() de travail.
- Merci, cela a fonctionné pour moi en revanche j'ai besoin d'utiliser .accordion("resize") au lieu de .resize()
- Notez que cette méthode a été déconseillée chez 1,9 et a supprimé en 1.10. Vous devez maintenant utiliser .accordion("refresh") à la place.
InformationsquelleAutor Sean Kinsey
0

J'ai récemment mis en place un accordéon qui extrait le contenu via ajax lors d'un onglet est activé et a couru dans le même problème. J'ai essayé d'utiliser certains des suggestions posté ici, mais ils n'ont jamais assez a augmenté le panneau correctement jusqu'à ce que j'ai défini la heightStyle de contenu.
```
$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});
```
Je suis à l'aide de jQuery-UI version 1.10.4.

InformationsquelleAutor Robbert
0

pour moi, la suite travaillé avec précision.
```
$( "#accordion" ).accordion({
    autoHeight: false,
```
});

InformationsquelleAutor R T

Vous devez vous connecter pour publier un commentaire.