Прокручиваемый выпадающий список не работает на мобильных устройствах

Выпадающий список не позволяет мне прокручивать или выбирать вариант на мобильном телефоне. Он отлично работает на рабочем столе, и если я имитирую мобильный телефон в браузере Chrome, он все еще работает, но при тестировании на устройстве Android раскрывающийся список появляется при выборе ввода и показывает полосу прокрутки, но не позволяет мне ничего выбрать или прокрутите варианты.

<div class="scrollable-dropdown-menu">
  <input id="${tableId}-mobile-securityGroups" href=""  type="search" placeholder="A Group"  data-toggle="dropdown" class="form-control typeahead m-b-0 " aria-expanded="false" value="" required>
  <input style="display: none;" id='${tableId}-securityGroupId-mobile' name='securityGroupId'>
</div>
@media (max-width: 500px) {

    .scrollable-dropdown-menu > span > div.tt-menu 
    {
        max-height: 100px;
        overflow-y: scroll;
    }
}

person paxtuik    schedule 18.06.2019    source источник
comment
overflow-y и overflow-x могут не поддерживаться в старых мобильных браузерах. Я помню, что у меня была эта проблема, особенно в браузере Samsung.   -  person Code Spirit    schedule 18.06.2019


Ответы (1)


При загрузке на мобильных устройствах открытие раскрывающегося списка добавляет .dropdown-backdrop в качестве области касания для закрытия раскрывающихся меню при нажатии вне меню. Z-индекс был 990 для div раскрывающегося списка, помещая его перед моим раскрывающимся списком.

person paxtuik    schedule 18.06.2019