選擇二變容器位置

如何調整選擇二容器的位置，使得搜索框就在原來的選擇元素位置想在這個網站選擇二變容器位置

http://www.jobnisit.com/en

它在UI方面看上去更清潔我的想法。

Ps。抱歉，我現在無法發佈圖片。

2015-07-22 sarantoo

這個問題太寬泛;你能否在你的問題中添加細節和代碼以幫助澄清？ – TylerH

@TylerH我沒有特定的代碼，但通常默認的Select2（單個選擇是特定的），點擊時，會出現一個搜索框出現在選定的列表下方。我的問題是有沒有辦法將搜索框放在選定列表的正上方。我見過提到的網站（http://www.jobnisit.com/en）這樣做，但我無法弄清楚他們是如何做到的。 – sarantoo

有2種方法可以做到這一點。

1）用CSS：

.select2-dropdown--below { 
    top: -2.8rem; /*your input height*/ 
}

這不會影響容器（.select2容器），但將移動下拉菜單和搜索欄，這樣你纔會有預期的效果。

2）隨着JS：

$('select').select2().on('select2:open', function() { 
    var container = .$('.select2-container').last(); 
    /*Add some css-class to container or reposition it*/ 
});

該代碼將一個處理程序「選擇2：打開」事件，這將是每次當用戶打開一個下拉時間發射。如果您在頁面上有多個選擇，則此方法更好。

測試與SELECT2 4.0.0

來源

2015-08-12 15:10:05

謝謝@Gennady，CSS解決方案適用於我。在此之前，我將負頂部設置爲.select2下拉菜單。似乎具有相同的效果。按照建議玩js解決方案。 – sarantoo

當文本框位於上方時，CSS解決方案無法工作，因爲在這種情況下，搜索框位於選擇區域之上。當滾動頁面時，位置自動更改，Javascript解決方案無法正常工作。 –

定位下拉使用由SELECT2插件提供的核心功能的適當的方式。

它爲我們提供了 'dropdownParent' 屬性放置到特定元素

選擇場內下拉列表：＃編輯現場作業技能-TID

父項：div.form，本期特價貨品field-job-skillsets-tid

jQuery("#edit-field-job-skillsets-tid").select2(
    {dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')} 
);

來源

2016-01-05 07:12:06 jospratik

選擇二變容器位置

回答

相關問題