選擇2下拉菜單分離科爾多瓦/ Phonegap

我在我的科爾多瓦/ Phonegap應用程序內使用Select2下拉，它的工作完美。除了有人滾動背景時，下拉內容會從下拉列表中分離出來，這會給用戶帶來不好的體驗。選擇2下拉菜單分離科爾多瓦/ Phonegap

有誰知道如何解決與CSS或jQuery？

我初始化它通常喜歡：

$(".search__box").select2({ 
       minimumResultsForSearch: Infinity, 
       width: '100%' 
});

然後代碼是這樣的：

<script type="text/ons-template" id="home.html"> 
<ons-navigator title="Navigator" var="kNavigator"> 

<div class="home-page wrapper"> 
    <select multiple="multiple" class="search__box form-control" name="search__box"> 
    </select> 
</div> 

</ons-navigator> 
</script>

在瀏覽器中測試時，它發生在iOS和Android的..和連。我懷疑這可能是由於home.html的模板之外產生的選擇2容器......但我什麼都試過了，我失去了:(

來源

2017-08-17 user1996496

最好在用戶滾動關閉'select2'。所以它不會造成這樣的問題。實際上，這是默認行爲，我不知道爲什麼它不會觸發你的應用程序。如果你想我可以幫你在滾動關閉'select2'。 – weBBer

@weBer我想這將是一個解決方案，至少會帶來更好的體驗。你有任何可以用來關閉滾動的代碼片段嗎？ – user1996496

給我2分鐘我會爲你做一個。 – weBBer

這是更好地關閉select2上用戶滾動，所以它不會造成這樣的問題，實際上，它是select2的默認行爲behaviou r，我不知道它爲什麼不會觸發你的應用！如果你想我可以幫你滾動關閉select2。

第一種方法

$(window).on('scroll', function(){ 
    $("#select2-drop-mask").click(); 
});

第二種方法

$(window).on('scroll', function(){ 
    ("#mySelectElement").select2("close"); 
});

第三種方法

$(window).on('scroll', function(){ 
    $("#mySelectElement").select2().trigger("select2:close"); 
});

如果你願意，你也可以觸發這個與resize功能故障安全相結合。希望這可以幫助你。

$(window).on('scroll resize', function(){ 
    $("#select2-drop-mask").click(); 
});

來源

2017-08-17 06:16:44 weBBer

選擇2下拉菜單分離科爾多瓦/ Phonegap

回答

相關問題