jQuery UI Accordéon Disobeys Hauteur

Cela devrait être facile pour vous. J'ai un accordéon que j'aimerais avoir une taille fixe. Chaque volet doit avoir la même taille, s'il y a un débordement sur un volet, une barre de défilement devrait apparaître. Dans le code ci-dessous, les barres de défilement apparaissent en chargement pour le premier volet, mais après le premier changement de volet, l'accordéon étend sa hauteur, de sorte que les barres de défilement ne sont plus nécessaires.jQuery UI Accordéon Disobeys Hauteur

Qu'est-ce que je fais mal?

<head> 

     <script type="text/javascript"> 
    jQuery(document).ready(function(){  
     $('#accordion').accordion({autoHeight: false, clearStyle: true}); 
    }); 
     </script> 

    </head> 

    <body> 
     <div id="accordion"> 
    <h3><a href="#">First Section</a></h3> 
    <div style="height:50px; overflow:auto"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis vehicula dui, quis volutpat odio bibendum a. Proin posuere convallis lorem id mattis. Vestibulum lacinia lacinia enim ut euismod. Aenean sit amet tincidunt nunc. Vestibulum gravida, ipsum in tempor dictum, diam nulla auctor purus, a vehicula ante odio quis massa. Pellentesque imperdiet urna ut elit adipiscing ac gravida lectus facilisis. Curabitur laoreet, justo vel dapibus auctor, enim sem dapibus nulla, sed lacinia felis felis sit amet dolor. Nulla lacus dolor, tincidunt convallis sodales vitae, interdum a sapien. Cras ut iaculis orci. Mauris vel nisl vel leo venenatis hendrerit. Duis aliquet lobortis purus, non malesuada lorem sagittis quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sit amet posuere eros. Nam vel turpis at sem adipiscing scelerisque a ac dolor. Morbi lobortis tristique felis, at aliquam libero suscipit sed. Aliquam erat volutpat. Donec porta lorem sed nisl fermentum pulvinar vehicula risus tempus. Integer ultricies dignissim vehicula. Morbi non dolor a arcu rutrum congue. Fusce non urna vitae eros blandit vehicula quis vel ligula. 
    </div> 

    <h3><a href="#">Second Section</a></h3> 
    <div style="height:50px; overflow:auto"> 
     Etiam varius, orci sit amet pharetra laoreet, diam augue dictum justo, et aliquam enim leo ut nulla. Quisque mi nunc, sagittis at euismod vel, feugiat a erat. In a metus quam. Pellentesque ullamcorper volutpat congue. Nunc facilisis varius velit eu lacinia. Quisque est nulla, tempus commodo gravida quis, consequat ut felis. Donec mattis, neque sagittis feugiat sollicitudin, augue lectus vulputate ligula, eget interdum nulla massa at nunc. Proin rhoncus nunc non felis mattis accumsan. Aliquam metus ligula, adipiscing ac ullamcorper vel, lobortis non erat. Aenean placerat libero porta enim dictum malesuada molestie sapien ultricies. Nullam ac commodo ligula. 
    </div> 

    <h3><a href="#">Third Section</a></h3> 
    <div style="height:50px; overflow:auto"> 
Morbi nec risus velit, eget ornare nibh. Duis semper elementum erat, ac egestas purus congue et. Sed commodo lacinia lorem, ac semper risus dapibus mattis. Aliquam quam quam, ultrices quis luctus sit amet, cursus vitae dolor. Nam id lectus justo. Pellentesque in leo sit amet metus eleifend lobortis eget nec turpis. Praesent vitae magna eget mauris cursus tempus vel at mi. Nulla vitae leo accumsan magna mollis luctus. Curabitur viverra nisi ac nisl pulvinar gravida. Curabitur consectetur, diam non placerat sagittis, velit nunc porttitor quam, vel interdum lorem est ut arcu. Suspendisse potenti. Pellentesque vitae leo nunc. 

    </div> 
    </div> 

    </body> 
</html>

Source

2010-10-11 SooDesuNe

Je semble que la height propriété est animée que l'accordéon ouvre et ferme. Ainsi, une fois que le panneau supérieur a été fermé une fois, sa hauteur a été modifiée par rapport à celle spécifiée dans le style en ligne et est 'perdue'.

Je trouve quand je facteur le style dans l'en-tête à l'accordéon fonctionne comme vous le souhaitez:

<head> 
    <style type="text/css"> 
     #accordion>div{ 
      height:50px; 
      overflow:auto; 
     } 
    </style> 
    </head>

Source

2010-10-28 18:43:48 SooDesuNe

J'ai ajouté ce style à mon échantillon dans http://stackoverflow.com/questions/8028470/how-to -show-more-than-one-item-en-jquery-ui-accordéon-panel mais il n'augmente pas la hauteur du panneau accordéon, il est encore trop petit – Andrus

Répondre

Questions connexes