bootstrap-select dropdown making it work on mobile

Question

I am having really hard time with this. Can someone please help?

I want to have native dropdown kick in for Mobile Devices

1. http://jsfiddle.net/4UjVr/4/

2. Docs: http://silviomoreto.github.io/bootstrap-select/#mobile

I want to have native dropdown kick in for Mobile Devices

Answer 1

This seems to do the trick.

$(function () {
$('#desktop').selectpicker({
    container: 'body'   
});

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('#desktop').selectpicker('mobile');
}
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />


<select id="desktop" data-live-search="true">
  <option>cow</option>
  <option>bull</option>
  <option>cow</option>
  <option>Test2</option>
  <option>Tes3</option>
  <option>Tes4</option>

  <option class="get-class" disabled>ox</option>
  <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
  </optgroup>
</select>