Dynamically re size inner div (bootstrap modal)

Question

I have the following HTML for the modal. When the seach-result-view is dynamically populated with content from the database(using ajax) it goes off page. I.e the content in seach-result-view goes off page and becomes un scrollable. I was expecting the Search-Result_div to be scrollable as it is inside another div (#Search_result).

 <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 is below.

.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;  
}

What can i be doing wrong here? appreciate any help :)

This is a blind guess, but I know I have had a scrollable modal body before- try adding one more level of `div` tag inside the body, and put your search results in there. — jches, May 24 '13 at 13:44
It might be worth putting together a fiddle or a live code example somewhere so that we can see this one in action? — johnkavanagh, May 24 '13 at 13:44

score 1 · Answer 1 · edited May 23 '17 at 10:25

Implement the modal as suggested by the official docs. Inside the modal-body div create another div say <div id='results'>.

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

Populate your results in this inner div and add this css:

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

This will ensure that the modal will of the fixed height and the body part will be scrollable

You should also take a look at: Twitter bootstrap scrollable modal

Dynamically re size inner div (bootstrap modal)

1 Answers1