동적으로 크기가 내부 div (부트 스트랩 모달)

모달에 대해 다음 HTML이 있습니다. seach-result-view가 (Ajax를 사용하여) 데이터베이스의 내용으로 동적으로 채워지면 페이지에서 벗어납니다. 즉 seach-result-view의 내용이 페이지를 벗어나 스크롤 할 수 없게됩니다. 나는 그것이 다른 div (#Search_result) 안에 있기 때문에 Search-Result_div이 스크롤 가능한 것으로 기대하고있었습니다.동적으로 크기가 내부 div (부트 스트랩 모달)

<div id="search_result" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Search results</h3> 
    </div> 
    <div id="seach-result-view" class="modal-body"> 
    </div>

css가 아래에있다.

.modal { 
position: fixed; 
top: 10%; 
left: 40%; 
width:780px; 
z-index: 1050; 
margin-left: -280px; 
background-color: #ffffff; 
border: 1px solid #999; 
border: 1px solid rgba(0, 0, 0, 0.3); 
*border: 1px solid #999; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
     border-radius: 6px; 
outline: none; 
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
-webkit-background-clip: padding-box; 
    -moz-background-clip: padding-box; 
     background-clip: padding-box; 
} 

.modal-body { 
position: relative; 
max-height: 80%; 
padding: 15px; 
overflow-y: auto; 
}

내가 여기서 잘못 할 수 있습니까? 어떤 도움을 주셔서 감사합니다 :)

출처

2013-05-24 Raju Kumar

이것은 블라인드 추측이지만, 나는 스크롤 할 수있는 모달 바디를 갖기 전에 - 몸체 안에 또 다른 레벨의'div' 태그를 추가하려고합니다. 검색 결과가 표시됩니다. – chesles

바이올린이나 라이브 코드 예제를 어딘가에 모아 두는 것이 효과적 일 수 있습니다. – johnkavanagh

공식 문서에 의해 제안 된대로 모달을 구현하십시오. 내부 modal-bodydiv 다른 div<div id='results'>을 만듭니다.

<div class='modal-body'> 
    <div id='results'> 
    </div> 
</div>

이 내부 사업부에서 결과를 채우기이 CSS를 추가

div#results 
{ 
width:150px; 
height:150px; 
overflow:scroll; 
}

이 고정 높이와 본문 부분의 모달 뜻이

당신이해야 스크롤 될 수 있도록 것 또한보십시오 : Twitter bootstrap scrollable modal

출처

2013-05-24 13:45:45 draxxxeus

동적으로 크기가 내부 div (부트 스트랩 모달)

답변

관련 문제