2013-10-16 2 views
0

jquery 1.9.1을 사용하고 있습니다. 내 아코디언에서 높이는 heightStyle 값 ('fill'의 'content')에 따라 지정됩니다.Jquery 아코디언 높이 넘침

하나의 창에서 나는 for 루프를 사용하여 목록을 렌더링하고 있습니다. 이 창은 내가 설정 한 속성에 관계없이 항상 넘쳐 흐르고 있습니다.

<style> 
     #accordion-resizer { 
      padding: 10px; 
      width: 350px; 
      height: 220px; 
     } 
</style> 
<script> 
     $(function() { 
      $("#accordion").accordion({ 
       heightStyle: "fill", 
       autoHeight: false 
      }); 
     }); 
     $(function() { 
      $("#accordion-resizer").resizable({ 
       minHeight: 140, 
       minWidth: 200, 
       resize: function() { 
        $("#accordion").accordion("refresh"); 
       } 
      }); 
     }); 
</script> 
</head> 
<body> 
    <div id="accordion-resizer" class="ui-widget-content"> 
     <div id="accordion" style="font-size: medium;"> 
      <h3>Projects</h3> 
      <div> 
       <p> 
       <form:form method="post" modelAttribute="projects" > 
        <c:forEach items="${projects}" var="project" varStatus="status"> 
         <tr> 
          <td align="center">${status.count}</td> 
          <td><input name="projects[${status.index}].projectId" 
           value="${project.projectId}" /><br /></td> 
         </tr> 
        </c:forEach> 

        <button type="submit"></button> 
       </form:form> 
       </p> 
      </div> 
      <h3>Excepteur sint occaecat</h3> 
      <div> 
       <p>Lorem Ipsum</p> 
       <p>tempora incidunt ut labore</p> 
      </div> 
      <h3>Other Info</h3> 
      <div> 
       <p>Neque porro quisquam </p> 
       <p>Sed eleifend nonummy </p> 
      </div> 
     </div> 
    </div> 

첫 번째 창, 로딩 후, 양식을 확장 따라서, 오버 플로우 :

여기 내 JSP입니다. 다른 정상적인 높이의 창은이 새로운 높이에도 적용됩니다. 나는 시도했다 :

heightStyle : "입력"및 heightStyle : "내용"

을 모두 밖으로 불어에서 첫 번째 창을 중지 할 수 없습니다.

+0

당신이 (NO JSP로)에만 HTML을 사용하는 경우 같은 일이 발생합니까? – jahroy

+0

아니요, 그렇지 않습니다. 이것은 JSP 내에서만 발생합니다. – tempusfugit

답변

0

많은 노력을 기울인 끝에 결국 해결책을 찾았습니다. 아코디언 창이 가변 길이 였기 때문에 일어났습니다. 이 설정은 오버 플로우 창을 방지하는 좋은 스크롤 막대

#accordion .ui-accordion-content { 
    max-height: 500px; 
    overflow-y: auto; 
} 

당신에게 감사에게 추가