2015-12-02 1 views
1

Le scénario est assez simple, j'ai une zone de texte dans un accordéon jQuery. Lorsque j'ajuste la hauteur de la zone de texte sur mon navigateur, le contenu de l'accordéon actuel chevauche l'accordéon ci-dessous.Contenu dynamique (Textarea) dans un accordéon jQuery

<div class="accordion"> 
    <h3>Sec 1</h3> 
    <div> 
     <textarea></textarea> 
     I move with the textarea 
    </div> 
</div> 

<div> 
    <span>I am being overlapped :o</span> 
</div> 

-J'ai rencontré un problème similaire avec du contenu dynamiquement ajouté (par exemple). J'ai surmonté cela en rafraîchissant l'accordéon.

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

Comment puis-je gérer le redimensionnement des zones de texte? Je ne veux pas capturer l'événement de redimensionnement car j'ai beaucoup de zones de texte et je ne veux pas garder une trace de toutes leurs dimensions initiales. Merci!

modifier

Je me rends compte maintenant, par l'accordéon par défaut va créer une barre de défilement pour le contenu 'débordait. Je veux que mon contenu pour redimensionner dynamiquement la hauteur cependant, donc je l'ai fait un sur-tour sur le css

.ui-accordion .ui-accordion-content { 
     overflow: visible !important; 
} 

Voici une démonstration de travail.

https://jsfiddle.net/normangr7/vebw8o0b/

+0

Pour une meilleure compréhension, S'il vous plaît fournir une démonstration ** ** travail (d'extrait de code *, jsFiddle ... *) –

+0

ok .. première fois en utilisant jsfiddle .. va bientôt télécharger –

+0

//jsfiddle.net/normangr7/vebw8o0b/ –

Répondre

1

Réglez le height : auto !important; pour .ui-accordion .ui-accordion-content

.ui-accordion .ui-accordion-content { 
    height :auto !important; 
    padding: 0px; 
    overflow: visible !important; 
} 

Démo: http://jsfiddle.net/kishoresahas/vebw8o0b/1

+1

Merci! exactement ce dont j'avais besoin. J'ai remarqué cependant que maintenant, quand je réduis l'accordéon, il n'y a pas d'animation, juste un instant. Doit être un compromis pour la hauteur générée automatiquement. –

+0

Bon, j'ai fait un petit hack sur 'animate'. essayez ceci. http://jsfiddle.net/kishoresahas/vebw8o0b/3/ –

+1

nice hack! très appréciée! –

0

Je pense que la réponse de votre question est ici: jQuery accordion w/input, how do you get the input to not close the accordion & still be able to control it?. Dans cette rubrique, dans le premier post, vous pouvez trouver des codes jsfiddle très utiles: Il y a 4 textarea dans l'accordéon et ils ne se chevauchent pas. En passant merci pour votre question, je recherchais une méthode pour l'ajustement dans mon 7 textarea dans une page, maintenant j'ai trouvé la solution.

+0

J'avais déjà vu cela. Je ne pense pas que cela réponde à ma question. Vous pouvez utiliser mon exemple jsfiddle pour voir ce que je veux dire. Merci –