。調整選擇多個列表與對話框

的大小我有一個對話框內選擇列表：。調整選擇多個列表與對話框

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

我填充在JavaScript file_list。爲list_container和CSS的「file_list`是這樣的：

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

#file_list { 
    border: none; 
}

的file_list打開一個對話框內，通常有許多選項（> 20）。當彈出對話框時，列表顯示約10個條目，我可以向下滾動到其他條目。但是，當我垂直調整對話框的大小時，我希望列表垂直擴展（即根據對話框中可用的垂直空間，列表應顯示多於10個條目）。我怎樣才能做到這一點？我試着做一些事情，比如將file_list的height css屬性設置爲auto，但它似乎不起作用。

來源

2011-12-01 AmbujS

這是類似於SOliver提供答案的一個點叫。我解決它通過在對話框中調整大小事件觸發的功能，並修改取決於對話框的高度選擇列表中的大小屬性：

$('#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的高度和寬度包含選擇列表爲自動。現在列表的大小應該隨着對話框的大小而變化。

雖然這個工作，它似乎是一個特設的解決方案。有沒有更好的方法來做到這一點？

來源

2011-12-05 23:49:59 AmbujS

您可以使用類似下面的內容一個事件呼叫過程中或以其他方式當元素被添加到身體

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

來源

2011-12-01 20:33:35 CBusBus

。調整選擇多個列表與對話框

回答

相關問題