прокручиваемый диалог в jquery

Question

Я пытаюсь повторить "DEMO 3" на этой странице:

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

это прекрасно работает, за исключением того, что я заполняю список флажков динамически, и иногда у меня больше флажков, чем помещается на странице. в любом случае можно сделать эту прокрутку максимально доступной, так как сейчас она просто исчезает с экрана.

EDIT: когда я пытаюсь добавить высоту в javascript, окно поднимается на нужную высоту, но флажки продолжают спускаться по странице. как сохранить флажки в контейнере и иметь вертикальную полосу прокрутки?

$(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

CSS:

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

Answer 2

переполнение: прокрутка;

в css для контейнера div, убедитесь, что вы установили высоту. Проблема в том, что не все браузеры поддерживают максимальную высоту, и поэтому ваш div всегда будет иметь одинаковый размер (если вы не указали каждый раз, когда вам нужна эта функция, разную высоту)

В вашем файле CSS (в этом случае сделайте это в файле CSS: jquery.simpledialog.0.1.css, если вы не переименовали загруженный файл):

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

(без звезд)