“down arrow” on select box does not respond when clicked unless select element is contained in label
this works: <label><select ><label>
“down arrow” on select box does not respond when clicked unless select element is contained in label
this works: <label><select ><label>
Unfortunately I could not reproduce the issue you described.
The selection works on select box with up/down arrows and without the label tag, see the following code:
HTML
<div mbsc-page class="demo-desktop-display-modes">
<div style="height:100%">
<div mbsc-form>
<div class="mbsc-grid">
<div class="mbsc-row mbsc-justify-content-center">
<div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
<div class="mbsc-form-group-inset">
<select mbsc-dropdown name="City" id="demo-desktop-single">
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
<option value="4">Chicago</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">New York</option>
<option value="8">Paris</option>
<option value="9">San Francisco</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script
mobiscroll.settings = {
lang: 'en',
theme: 'ios',
themeVariant: 'light'
};
$(function () {
$('#demo-desktop-single').mobiscroll().select({
touchUi: false,
});
});