保持select2元素與滾動固定大小？

Here is a fiddle for example.保持select2元素與滾動固定大小？

這個例子說明是與正常的多選SELECT2元件作爲用戶從列表中選擇將擴大下來並引起父容器擴大下來的物品。由於移動和佈局方面的擔憂，我無法讓父母的身材比他們的身材更大。

如何設置一個選項來禁用元素的擴展，或者至少設置CSS來保持元素的大小並允許用戶滾動？

防止linkrot的代碼如下。

HTML：

<form> 
    <select class="select-select2" multiple="multiple" data-placeholder="Please choose one or more" data-allow-clear="true" data-close-on-select="false"> 
<option>Lorem</option> 
<option>ipsum</option> 
<option>dolor</option> 
<option>sit amet</option> 
<option>consectetur</option> 
<option>adipisicing</option> 
<option>elit sed</option> 
<option>do eiusmod</option> 
<option>tempor</option> 
<option>incididunt</option> 
<option>ut labore</option> 
<option>et dolore</option> 
<option>magna aliqua</option> 
<option>Ut enim ad</option> 
</select> 
    <button type="submit">Submit</button> 
</form>

JS：

$(".select-select2").select2();

來源

2015-09-25 o_O

http://jsfiddle.net/8svf11yh/1/

.select2-container .select2-selection { 
    height: 60px; 
    overflow: scroll; 
}

或者溢出：汽車;可能是一個更好的選擇

來源

2015-09-25 17:47:52 smcd

完美 *我想我此評論小時前加入，並沒有注意到有人告訴我，我需要更多的字符。謝謝。 –

感謝它的工作...... – prasanthrubyist

它的工作..但如果你讓它像「overlow：auto」，它看起來更美麗和真實。沒有滾動條顯示，但像滾動條區域一樣工作。 – saadk

一些改進，以@ SMCD的版本：

.select2-selection--multiple { max-height: 10rem; overflow: auto }

我使用max-height因此，如果只選擇幾個選項，它可以更小。只有達到那個高度，它纔會變大。建議overflow: auto是偉大的，因爲它只在需要時使用滾動條。最後，我定位選擇器的--multiple變體，以便只有具有多個選項的選項才能獲得此樣式。

來源

2016-12-16 12:23:07

這將與最新的選擇2插件工作：

.select2-results__options { 
    height: 60px; 
    overflow-y: auto; 
}

來源

2017-04-19 06:32:13 adamj

保持select2元素與滾動固定大小？

回答

相關問題