scrollable dialog in jquery

Question

i am trying to replicate "DEMO 3" in this page:

http://www.mudaimemo.com/p/simpledialog/

it works great except that i am filling up the checkbox list dynamically and sometimes i have more checkboxes than fit on the page. is there anyway to make this scrollable so there is a max size as right now it just goes off the screen.

EDIT: when i try to add a height to the javascript, the box comes up the right height but the checkboxes keep going down the page. how do i keep the checkboxes in the container and have a vertical scroll bar?

$(document).ready(function() {
    $('#sdHc3').simpleDialog({
    showCloseLabel: false,
        height: 400,
        open: function() {
            $('#checkboxStatus').html('');
        },
        close: function() {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function() {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show();
        }
    });

Answer 1

overflow: scroll;

in the css for the container div, make sure you set a height. Trouble with this is that not all browsers support max-height and so your div will always be the same size (ofc unless you specify each time you need this feature, a different height)

In your css file (in this case do it in the css file: jquery.simpledialog.0.1.css if you didn't rename the downloaded file):

.sd_container{
 font-family: arial,helvetica,sans-serif;
 margin:0;
 padding: 10px;
 position: absolute;
 background-color: #fff;
 border: solid 1px #ccc;
 text-align:center;
 **overflow: scroll;**
}

(without the stars ofc)

Answer 2

CSS:

#scrollableDiv
{
    overflow: auto;
    height: 549px;/* IE is dumb */
    max-height: 549px;/* Or the amount of pixels you want */
}