0

Hey guys so I'm working on an angular project and using bootstrap 5. I wanted to implement a dropdown multiselect and unfortunately the dropdown doesn't get expanded.

I am following this example: Creating Multi-Select Dropdown with Angular and Bootstrap 5

I've created a stackblitz example: https://stackblitz.com/edit/github-va1hpx?

Hope someone can help with that.

Maido47
  • 43
  • 1
  • 8

1 Answers1

1

FIXED

The problem was that in the example used the alpha version of bootstrap5 and I'm using 5.1.3. In that time bootstrap made some changes on what classes should be added to buttons etc. So you should write

this:

 <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true"

instead of this:

 <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"

And also other html elements should be getting specific classes like the margin classes

ms-1 ms-2 ....

on the input elements

So in my case it wasn't a problem of adding

jQuery.js or popper.js

to my angular.json like mentioned in other threads: https://stackoverflow.com/search?tab=Relevance&pagesize=30&q=popper.js%20bootstrap&s=144706d6-c9be-4120-b105-c37f2b848352

It was just the default bootstrap5 classes.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Maido47
  • 43
  • 1
  • 8