I have an application that has been in production for more than 2 years.
Recently some upgrade has caused every Select input field to no longer fire on Android devices.
They still work on iOS devices.
here's an example of HTML
<label class="item item-input"> <span class="input-label">Physio</span> <select id="selectPhysio" class="selectDropdown"> <option value=""></option> <option value="">All</option> {{#each physio}} <option value="{{_id}}" {{isSelected}}> {{Physio}} </option> {{/each}} </select> </label>
and the CSS that styles the dropdown
.selectDropdown { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-position: 97% center; background-repeat: no-repeat; background-color: transparent; border: 1px solid #AAA; color: #555; font-size: inherit; margin-left: 5px; overflow: hidden; padding: 5px 10px; text-overflow: ellipsis; white-space: nowrap; width: 150px; }
I am currently overcoming the issue by loaning iOS tablets to all Android users.
Any ideas would be most welcome and appreciated
I have an application that has been in production for more than 2 years.
Recently some upgrade has caused every Select input field to no longer fire on Android devices.
They still work on iOS devices.
here's an example of HTML
<label class="item item-input"> <span class="input-label">Physio</span> <select id="selectPhysio" class="selectDropdown"> <option value=""></option> <option value="">All</option> {{#each physio}} <option value="{{_id}}" {{isSelected}}> {{Physio}} </option> {{/each}} </select> </label>and the CSS that styles the dropdown
.selectDropdown { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-position: 97% center; background-repeat: no-repeat; background-color: transparent; border: 1px solid #AAA; color: #555; font-size: inherit; margin-left: 5px; overflow: hidden; padding: 5px 10px; text-overflow: ellipsis; white-space: nowrap; width: 150px; }I am currently overcoming the issue by loaning iOS tablets to all Android users.
Any ideas would be most welcome and appreciated