Question

I have a select list inside a dialog box:

<div id='Dialog' title='Title'>
    <div id='list_container'>
        <select id='file_list' multiple='multiple'>
        </select>
    </div>
</div>

I’m populating file_list in javascript. The css for list_container and ‘file_list` look like this:

#list_container {
    width: auto;
    height: auto;
    overflow: auto;
    border: 1px black solid;
    margin: auto;
}

#file_list {
    border: none;
}

The file_list opens inside a dialog box and typically has many options(>20). When the dialog box pops up, the list shows about 10 entries and I can scroll down to other entries. However, I want the list to expand vertically when I resize the dialog box vertically (i.e. the list should show more than 10 entries depending on the vertical space available in the dialog box). How can I do this? I tried doing a few things like setting the height css attribute for file_list to auto , but it doesn’t seem to work.

Answer 1

This is similar to the answer provided by SOliver. I solved it by firing a function at the dialog resize event, and modifying the size attribute of the select-list depending on the height of the dialog box:

$('#Dialog').dialog({
  height: 460,
  width: 500,
  //Add a function on the dialog resize event
  resize: function(event, ui) {
    var default_height = 460;     //default height 
    var new_height = ui.size.height; //Gives height after resize
      if (new_height > default_height) {
        var list = $('#file_list');
        var row_height = ((flist.height())/(flist.attr('size'))); 
                             //Get height of one row
        var extra_space = new_height-default_height;
        var list_newSize = Math.floor(extra_space/row_height) + 11; 
                            //11 is the default or minimum 'size' of file_list
        flist.attr('size',list_newSize);
      }
  }
);

Make sure you set the height and width of the div that contains select list to auto. Now the size of the list should scale with the size of the dialog box.

Though this works, it seems like an ad-hoc solution. Any there any more elegant ways to do this?