Select2 Friendly на мобильном телефоне - PullRequest
Новая
       8

Select2 Friendly на мобильном телефоне

0 голосов
/ 06 ноября 2018

Я стремлюсь сделать select2 более дружелюбным на мобильных устройствах, и поэтому я использую стили css, чтобы отобразить результат выбора элементов select2 над всеми элементами страницы.

Я могу это сделать, однако у меня есть проблема, связанная с событием click в select. Если я вызываю select2 вручную (не с помощью элемента управления select), результат отображается правильно, однако, когда я нажимаю непосредственно на элемент управления select, отображается результат, но, очевидно, событие click на элементе управления select распространяется так, как если бы на него щелкнули варианты выбора, в результате чего экран результатов закрывается вскоре после открытия.

Пример:

Html: 

<body>
    <div id="main" style="margin-top: 150px;">
    <select id="example" class="js-example-basic" style="min-width: 200px; margin-top: 200px">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
    <button id="openSelect">Show as Popup (Correctly)</button>
    </div>
    </body>

Css 

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999999;
    font-size: 18px;
    -webkit-transition: all .4s;
    transition: all .4s;

}


.select2-results {   
    height: 90% !important;
}




.select2-results__options {
    max-height: 100% !important;
    height: 100% !important;
    overflow-y: scroll !important;
}




    .select2-dropdown--below {
    display: block !important;
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    background: white !important;
    width: 250px !important;
    height: 100%;
    z-index: 3000 !important;

}

JQuery 

$(document).ready(function() {


$('#example').select2({
});


});

$("#openSelect").click(function() {

$('#example').select2("open");

});


$('#example').on('select2:opening', function (e) {
  $('body').addClass("overlay");
});

$('#example').on('select2:closing', function (e) {
  $('body').removeClass("overlay");
});

https://jsfiddle.net/m7n8Lsgc/

Полагаю, можно было бы перехватить только щелчок по событию через событие «select2: открытие», но я не добился успеха.

Любые предложения о том, как обойти это?

...