jQueryUI jQueryUI 대화 상자 - 전체 대화 상자가 아닌 탭 콘텐트 만 스크롤바를 얻으려면 어떻게해야합니까?

jQueryUI 대화 상자에서 jQueryUI 탭을 사용하고 있습니다. 각 탭 패널의 내용은 상당히 클 수 있습니다. 예를 들어 각 탭 패널 안에 수백 개의 행이있는 테이블이있을 수 있습니다. 따라서 스크롤바는 내용을 탐색해야합니다.jQueryUI jQueryUI 대화 상자 - 전체 대화 상자가 아닌 탭 콘텐트 만 스크롤바를 얻으려면 어떻게해야합니까?

기본적으로 대화 상자 패널에는 자체 스크롤바가 표시됩니다. 이 스크롤 막대를 사용하면 탐색 탭 자체가 위로 이동하거나 보이지 않게 이동합니다. 필요한 경우 각 탭 패널에 자체 스크롤 막대를 표시하고 탐색 탭을 표시 한 채로 두는 것이 좋습니다. 대화 패널의 "오버 플로우 : 숨김"설정을 시도한 다음 개별 탭 패널 (아래 참조)의 "오버 플로우 : 자동"설정을 시도했습니다. 그러나 탭 패널은 내용이 그것을 요구할 때조차도 스크롤바를 얻지 못합니다.

다음은 오버 플로우 스타일을 사용하여 문제를 해결하려는 시도를 포함하여 문제를 보여주는 (감소 된) 테스트 사례입니다. "Big content ..."를 스크롤 바를 필요로하는 것으로 바꾸면 그것을 볼 수 있습니다.

충분히 명확합니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 많은 감사 ...

<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#dialog").dialog({height:300}); 
    $("#tabs").tabs(); 
}); 
</script> 
</head> 
<body> 
    <div id="dialog" style="overflow:hidden;"> 
     <div id="tabs"> 
     <ul> 
      <li><a href="#tab-1">tab-1</a></li> 
      <li><a href="#tab-2">tab-2</a></li> 
     </ul> 
     <div id="tab-1" style="overflow:auto;">Big content...</div> 
     <div id="tab-2" style="overflow:auto;">Big content...</div> 
     </div> 
    </div> 
</body> 
</html>

출처

2011-09-11 rmw

당신은 즉, '콘텐츠'를 포함하는 각 사업부의 높이를 제한 할 수 있습니다 :

height:100px; 
overflow:auto;

데모 : 모든 것이 매우 간단하게 http://jsfiddle.net/AeXNP/

편집 : 사용자가 대화 상자의 크기를 조정할 때 콘텐츠 크기가 조정되는 것이 더 힘들어집니다 (아래 요청한대로). In은 훨씬 더 많은 CSS를 포함합니다 ... 당신의 경우 오버 플로우를 사용하려면 div의 높이가 필요합니다. 높이가 항상 변하기 때문에 높이를 알 수 없습니다. 따라서 여백과 패딩을 수동으로 설정해야 높이를 '자동'으로 설정할 수 있습니다. 그래서 자기 확장 탭 내용에 대한 CSS는 다음과 같습니다

.fixedSizedTab { 
    overflow:auto;  
    position:absolute; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin-top:50px; 
    margin-bottom:10px; 
    margin-right:0px; 
    margin-left:0px; 
}

데모 : 꽤 좋아 보인다 http://jsfiddle.net/AeXNP/2/

출처

2011-09-11 00:19:38

-하지만 탭의 높이가 자동으로 포함하는 대화 상자와 함께 크기를 조정하면 훨씬 더 좋은 것 . – rmw

다음을 포함하도록 다시 업데이트 답변 : –

예. 하드 코딩 된 margin-top : 50px는 특정 높이의 탭에 대한 의존성을 도입합니다. 실제로는 30px 밖에 안됩니다. 하지만 나는 그걸로 살 수 있다고 생각합니다. 아마도 일부 자바 스크립트는 페이지가 처음 렌더링 될 때 탭의 "실제"높이를 계산할 수 있지만 가치가있는 것보다 더 많은 작업 일 수 있습니다. – rmw

jQueryUI jQueryUI 대화 상자 - 전체 대화 상자가 아닌 탭 콘텐트 만 스크롤바를 얻으려면 어떻게해야합니까?

답변

관련 문제