CODEWITHSUNDEEP
bootstrap-5bootstrap-select
marius
marius

Reputation: 1266

bootstrap-select not working together with bootstrap 5

I am using the library bootstrap-select, recently I needed to upgrade from bootstrap version 4 to 5, according to the bootstrap-select side there should be support and no issue with that.

Here is a link zu the jsFiddle

enter image description here

This is what I m trying to do, and it worked before the upgrade:

const inputScreen = $('<select class="selectpicker"><option>test</option></select>').appendTo(conScreen);
inputScreen.selectpicker();

However, the dropdown elements are being shown, but I cant open it.

enter image description here

There is no error in the console. The only thing i can see, is that there is an hidden element which never gots displayed: enter image description here

Upvotes: 2

Views: 11149

Answers (4)

hakanaltindis
hakanaltindis

Reputation: 131

You can use min version for all javascript and css libraries. It worked for me.

<html>
  <head>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-select/css/bootstrap-select.min.css" />
  </head>

  <body>

    <!-- Your page code is here -->

    <script src="~/lib/jquery/jquery.slim.min.js"></script>
    <script src="~/lib/popper.js/umd/popper.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
  </body>
</html>

The libraries versions:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap-select/"
    },
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/popper.js/"
    }
  ]
}

Upvotes: 0

Burjak Yahya
Burjak Yahya

Reputation: 41

for solve this problem, we cane use beta3 version https://openbase.com/js/bootstrap-select/versions

Upvotes: 3

Stepan Tripal
Stepan Tripal

Reputation: 681

I had the same problem, solved it by downgrading bootstrap to version 4.6.1

Upvotes: 0

marius
marius

Reputation: 1266

i figgured the answer out myself, it is about the position of the include. Popper.js needs to be included before bootstrap v5. That did the job!

Upvotes: 4

Related Questions