대화 상자에서 Jquery-ui 스크롤 가능 목록

Question

내 crm 2011 응용 프로그램에서 JQuery-Ui를 사용하고 있습니다. jquery-ui-dialog를 사용하여 목록을 표시하지만 목록이 너무 길면 세로 스크롤 막대가 나타납니다. 이제 목록이 양식의 길이를 초과합니다. 대화 상자의 최대 높이를 설정하려고했지만 아무 일도 없었습니다. 아마도 올바른 방법으로하지 않았을 것입니다. (jquery와 css가 처음입니다.) 감사합니다. 감사합니다.

var listItemsString = ""; 

for (var i = 0; i < listItemsArray.length; i++) { 
    listItemsString += "<li class='ui-widget-content'>" + listItemsArray[i] + "</li>"; 
} 

var div = $("<div id='myListDialog' title='this is the title'><p class='validateTips'>this is the description</p>" 
       + "<form><ul id='selectable'>" + listItemsString + "</ul></form></div>"); 

$("body").prepend(div); 

$("#selectable ul").css({ "list-style-type": "none", "margin": "0", "padding": "0", "width": "60%" }); 
$("#selectable li").css({ "margin": "3px", "padding": "0.4em", "height": "14px" }); 

$("#selectable").selectable({ selected: listSelectfunction ,unselected: listUnselectfunction}); 

$("#myListDialog").dialog({ 
    height: 20, 
    modal: true, 
    autoOpen: true, 
    draggable: false, 
    resizable: false, 
    position: [350, $(window.parent.document).scrollTop() + 500/2], 
    closeOnEscape: false, 
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
    buttons: buttons 
}); 

Answer 1

당신은 최대 높이 (최대 높이)가하고 자동으로 오버 플로우를 설정하여 그 안에서 스크롤 확인하기 위해 대화 상자에서 무엇이든을 설정할 수 있습니다. 이 바이올린 참조 : 대답에 대한 http://jsfiddle.net/582ms/1/이

.child { 
    max-height:150px; 
    overflow: auto; 
    width: 150px; 
}