Select2ドロップダウンメニューがCordova/Phonegapにデタッチ

Question

私のCordova/Phonegapアプリ内でSelect2ドロップダウンを使用しています。誰かが背景をスクロールする場合を除いて、ドロップダウンの内容はドロップダウンから切り離され、その結果、ユーザーには悪い経験になります。

誰でもCSSやjQueryで修正する方法は知っていますか？

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

そして、コードは次のようなものです：：

私はそれを初期化しています正常に好きなブラウザでそれをテストするときには..andも、両方のiOSとAndroid上で起こっている

<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> 

。私はそれが原因home.htmlテンプレートの外部で生成されSELECT2-コンテナにあるかもしれないことを疑う...しかし、私はすべてを試みたと私は迷ってしまいました:(

Answer 1

それは、select2上を閉鎖する方が良いでしょうユーザーのスクロールのように表示されないので、実際にはのselect2のデフォルトの振る舞い r、あなたのアプリを起動していない理由はわかりません！

まずメソッド

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

第2の方法

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

第3の方法

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

あなたはまた、これはフェイルセーフとしてresize機能と組み合わせてトリガすることができますしたい場合。これがあなたを助けることを願ってください。

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