I have a fairly complex Bootstrap 3 tabgroup of forms that are populated with combo boxes that work fine at desktop width, but in mobile the combo boxes are frozen or something and won't show the drop down.
Here is the first of the four forms embedded in the tab-group...
<form role="form" id="prop-search" name="prop-search" method="get" target="_blank" action="search.php">
<input type="hidden" name="searchtype" value="Residential">
<div class="col-md-2 col-sm-6 col-xs-6">
<div class="form-group">
<label for="location">City</label>
<select class="form-control" id="area" name="area">
<?php
$action=basename(__FILE__, '.php'); // load action from filename for consistancy
$controller = new retsController($action . '-cities'); // register controller with page action and parameter
$controller->invoke(); // invokde controller to get view
?>
</select>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<div class="form-group">
<label for="type">Type</label>
<select class="form-control" id="proptype" name="proptype">
<option selected>House</option>
<option>Condo</option>
<option>Townhome</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<div class="form-group">
<label for="bathroom">Baths</label>
<select class="form-control" id="baths" name="baths">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4+</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<div class="form-group">
<label for="bedroom">Beds</label>
<select class="form-control" id="beds" name="beds">
<option>1</option>
<option>2</option>
<option selected>3</option>
<option>4+</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<div class="form-group">
<label for="minprice">$-Range</label>
<select class="form-control" id="pricerange" name="pricerange">
<option value="0-100">$0-$100k</option>
<option value="100-175">$100k-$175k</option>
<option value="175-250" selected>$175k-$250k</option>
<option value="250-325">$250k-$325k</option>
<option value="325-400">$325k-$400k</option>
<option value="400-500">$400k-$500k</option>
<option value="500-600">$500k-$600k</option>
<option value="600-750">$600k-$750k</option>
<option value="750-900">$750k-$900k</option>
<option value="900-1100">$900k-$1.1m</option>
<option value="1100-1500">$1.1m-$1.5m</option>
<option value="1500-100000">$1.5m+</option>
</select>
</div>
</div>
<!-- </div>
<div class="col-md-2 col-sm-2 col-xs-3"> -->
<div class="row text-center">
<div class="col-md-12">
<div class="form-group">
<!-- <label for="submit"> </label> -->
<input type="submit" name="submit" value="search" class="btn btn-default btn-block">
</div>
</div>
</div>
</form>
Here is a quick-n-dirty fiddle showing the problem.
https://jsfiddle.net/edkwudy9/
Notice that if you pull the width wide enough where you get the 6 columns (col-md-2 in Bootstrap), the dropdowns work just fine, but when you shrink the width to col-sm-6 col-xs-6, they stop working.
I just have no idea what could be wrong and I'm burning through unbillable hours with this issue like no ones business.
I am a backend developer who got myself roped into this project and now find myself somewhat over my head with debugging BS3 and mobile.
the actual dev site to see the control in action...
http://webwarephpdevelopment.com:8080/index.php
