0

I'm using JQuery-Ui in my crm 2011 application. I use jquery-ui-dialog to diaplay a list, but when the list is too long I want a vertical scroll bar to appear. now the list exceeds the length of the form. I tried setting the dialog's max-height, but nothing happened - perhaps I didn't do it the right way.. (I'm new to jquery and css). I would appreciate any help, Thanks!

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
});
ckita
  • 33
  • 2
  • 7

1 Answers1

4

You can set anything in your dialog to have a maximum height (max-height) and make it scroll within it by setting overflow to auto. See this fiddle: http://jsfiddle.net/582ms/1/

.child {
    max-height:150px;
    overflow: auto;
    width: 150px;
}
Brocco
  • 62,737
  • 12
  • 70
  • 76
  • Thanks for the answer, but I still can't get it to work. A scroll bar does appear now, but I still can't set the dialog's max-height - meaning - the dialog is still too long, but now the list has a scroll bar (that actually does nothing..) – ckita Feb 13 '13 at 12:24
  • I plugged your JS into a fiddle and gave you some CSS, which is setting the max-height on both of them (dialog div and list).... http://jsfiddle.net/ufv5K/2/ – Brocco Feb 13 '13 at 14:01