CODEWITHSUNDEEP
jquerytwitter-bootstraplaraveldatatablesbootstrap-select
frogeyedman
frogeyedman

Reputation: 534

Bootstrap select won't dropdown when datatables is included

I'm trying to use Bootstrap select, this works but only on the pages where datatables is not loaded. The problem is when I click on the bootstrap select it wont turn aria expended to true, the strange thing is: when I clicked on the select button and hit a key on my keyboard, it triggers the button and expands it.

I don't know if there is a quick fix for this or datatables and Bootstrap select won't work together.

My code:

  <!--  // Header cdns
     DataTables -->
 <link rel="stylesheet" href="{{ asset('vendor/adminlte/plugins/datatables/dataTables.bootstrap.min.css') }}">

 <!-- Bootstrap-Select -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
   
<!--  // select button -->
  <select data-live-search="true" name="stores" id="stores" class="form-control selectpicker">
       <option value="1" data-content="Amsterdam"></option>
   </select>

<!-- // footer cdns
  Bootstrap-Select -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
 
 <!-- DataTables -->
 <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
 <script type="text/javascript" src="https://www.datatables.net/plug-ins/i18n/Dutch"></script>

Take note that this is not my full code but just the important parts of it.

Upvotes: 0

Views: 2145

Answers (1)

frogeyedman
frogeyedman

Reputation: 534

So the solution was simple, i loaded it before the bootstrap.js file.. And it needs to be loaded after the bootstrap.js file.

Upvotes: 1

Related Questions