스크롤하는 내용과 고정 된 머리글이 포함 된 패널이있는 jQuery UI 아코디언

Question

아코디언에 fillspace가 true로 설정되어있는 동안 날짜 선택 도구가있는 고정 머리글과 스크롤 가능한 내용이있는 패널에서 아코디언을 만들고 싶습니다. 따라서 panel-hmmm이라는 아코디언 패널은 스크롤하지 않아야하지만 div 내부의 스크롤 가능한 내용은 스크롤해야합니다.

<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

정확하게 원하는 것은 확실하지 않지만이 CSS를 추가하십시오. 원하는 영역 안쪽에 맞게 높이를 조정하십시오.

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

아코디언 패널 모두에 영향을 .ui-accordion-content와 .panel-hmmm를 교체합니다.

---

업데이트 :이 스크롤 내용의 높이가 필요

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

그렇지 않으면 그것을 설정하는 : 당신은 항상 패널이 열려있을 때, 나는에 CSS를 전환 할 거라고 볼 수 날짜 선택기를 원하는 점을 감안 가득 차있는 고도를 유지할 것이다. demo에서 아코디언 패널은 CSS가없는 페이지에서 벗어날 것이므로 처음에는 .panel-hmmm을 베란트 높이로 설정했습니다.