Dropdown will not allow me to scroll or select an option on mobile. It works fine on desktop, and if I simulate mobile in the chrome browser it still works, but when testing on an android device the dropdown will appear when the input is selected, and it shows a scroll bar, but will not let me select anything or scroll through the options.
<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;
}
}
With bootstrap on mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu. The z-index was 990 for the dropdown-backdrop div putting it in front of my dropdown