jQuery ui accordéon avec panneau contenant un contenu défilant et un en-tête fixe

Question

Je voudrais avoir un accordéon avec un panneau qui a un en-tête fixe avec un sélecteur de date et un contenu défilant tandis que l'accordéon a un espace défini sur true. Donc le panel d'accordéon appelé panel-hmmm ne devrait pas défiler mais le div à l'intérieur appelé scrollable-content devrait le faire.

<div id="accordion-west"> 
    <h3> 
     <a href="#">hmmm</a> 
    </h3> 
    <div class="panel-hmmm"> 
     <div class="date-picker"> 
     </div> 
     <div class="scrollable-content"> 
      <b>Accordion inside a layout-pane</b> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum 
       neque a velit laoreet dapibus. Etiam eleifend tempus pharetra.</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
      <p> 
       .</p> 
     </div> 
    </div> 
    <h3> 
     <a href="#">chips</a> 
    </h3> 
    <div> 
     <p style="font-weight: bold;"> 
      Sed Non Urna</p> 
     <p> 
      Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, 
      dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus 
      libero ac justo.</p> 
     <p> 
      Vivamus non quam. In suscipit faucibus urna.</p> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.panel-hmmm .date-picker').datepicker(); 
     $("#accordion-west").accordion({ 
      fillSpace: true 
     }); 
    }); 
</script> 

Answer 1

Je ne suis pas sûr de ce que vous voulez exactement, mais essayez d'ajouter ce CSS. Réglez la hauteur pour s'adapter à l'intérieur de la zone que vous le souhaitez.

.panel-hmmm { 
overflow: scroll; 
height: 300px; 
} 

Remplacer .panel-hmmm avec .ui-accordion-content pour effectuer tous les panneaux d'accordéon. Étant donné que vous voulez que le datepicker toujours visible lorsque le panneau est ouvert, je le CSS à basculer::

.scrollable-content { 
overflow: scroll; 
height: 300px; 
} 

La hauteur de ce contenu scrollable doit être définie autrement il

---

Mise à jour maintiendra sa pleine hauteur. Dans un demo j'ai mis en place, le panneau d'accordéon partirait de la page sans n'importe quel CSS, c'est pourquoi j'ai initialement placé le .panel-hmmm à une hauteur vertain.