Algorithman
Algorithman

Reputation: 1334

bootstrap select 1.13.1 doesn't seem to work even with bootstrap 4 used

I tried the simplest code example using bootstrap-select:

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
  <select class="selectpicker" data-live-search="true">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</body>
</html>

Running example of the above code: https://jsfiddle.net/vpjnmatk/6/

The select box doesn't show drop-down when clicked. I am really confused since I think I have already included all the required dependencies. Any idea?

Upvotes: 1

Views: 2143

Answers (3)

billy.farroll
billy.farroll

Reputation: 1921

You need to add the following in your <head> tags:

<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script> 

Upvotes: 0

Rajender Joshi
Rajender Joshi

Reputation: 4205

Include popper.js before bootstrap.min.js

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
  <select class="selectpicker" data-live-search="true">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>

</body>
</html>

<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>

Upvotes: 2

Fab
Fab

Reputation: 4657

Here's the problem:

enter image description here

You need Popper.js

Upvotes: 3

Related Questions