Question

我在对话框中有一个选择列表：

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

我在javascript中填充file_list。 list_container和'file_list`的css如下所示：

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

#file_list {
    border: none;
}

file_list在对话框内打开，通常有很多选项（＆gt; 20）。弹出对话框时，列表显示大约10个条目，我可以向下滚动到其他条目。但是，当我垂直调整对话框大小时，我希望列表垂直展开（即，根据对话框中可用的垂直空间，列表应显示10个以上的条目）。我怎样才能做到这一点？我尝试过做一些事情，例如将file_list的高度css属性设置为auto，但它似乎不起作用。

Answer 1

您可以使用类似于以下内容的事件，或者在事件调用期间调用，或者在元素添加到正文时使用

var width = document.getElementById("list_container").offsetWidth;
document.getElementById("file_list").style.width = width;

Answer 2

这与SOliver提供的答案类似。我通过在对话框resize事件中触发一个函数来解决它，并根据对话框的高度修改选择列表的size属性：

$('#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);
      }
  }
);

确保将包含选择列表的div的高度和宽度设置为自动。现在，列表的大小应该与对话框的大小一致。

虽然这有效，但它似乎是一种临时解决方案。有没有更优雅的方法呢？

使用对话框的大小调整选择多个列表的大小

2 个答案: