0

so I was building an electron based app. I used some bootstrap fancy but not complicated components and they all worked just fine. then I needed to use the Buttons with dropdowns .. more specifically this example dropdown menu Bootstrap 5.2 just tried to copy paste the example as a trial but it just didn't work (didn't open the menu)

here is the button in my html

<div class="input-group mb-3">
                    <span class="input-group-text key" id="basic-addon1">Pack type</span>
                    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">PVC/Clear</a></li>
                      <li><a class="dropdown-item" href="#">PVC/PVDC</a></li>
                      <li><a class="dropdown-item" href="#">PVC/Aclar</a></li>
                      <li><a class="dropdown-item" href="#">PVC/PE/PVDC</a></li>
                      <li><a class="dropdown-item" href="#">ALU/ALU</a></li>
                      <li><a class="dropdown-item" href="#">Glass bottle clear</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">PVC/Clear - white</a></li>
                      <li><a class="dropdown-item" href="#">PVC/PVDC - white</a></li>
                      <li><a class="dropdown-item" href="#">PVC/Aclar - white</a></li>
                      <li><a class="dropdown-item" href="#">PVC/PE/PVDC - white </a></li>
                      <li><a class="dropdown-item" href="#">ALU/ALU - white </a></li>
                      <li><a class="dropdown-item" href="#">Glass bottle clear - white </a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">Amber glass bottle</a></li>
                      <li><a class="dropdown-item" href="#">Glass ampule clear</a></li>
                      <li><a class="dropdown-item" href="#">Glass ampule amber</a></li>
                    </ul>
                    <input type="text" class="form-control inputs input" aria-label="Username" aria-describedby="basic-addon1">
                  </div>

I searched for some possible solution and I came across some answers that says to try the following :

  1. include jQuery (as I wasn't in the first place :D)
  2. downgrading jQuery to 3.5.1. (read it in here downgrade tot jQuery 3.5.1)
  3. tried to download and include the popper.js library as explained here use popper.js

all came to the same result .. no menu is showing. hope someone here have something helpful. thanks in advance.

Mohamed Hussein
  • 21
  • 6
  • Your HTML markup seems OK. You can see it working in https://codepen.io/julien-deramond/pen/gOKKvyX. With the latest versions of Bootstrap, you don't need jQuery anymore (but it is compatible if you're already using it in your project). I've configured my CodePen to use bootstrap.bundle.min.js that contains Bootstrap JS + Popper (see https://getbootstrap.com/docs/5.2/getting-started/contents/#js-files). – Julien Déramond Nov 27 '22 at 11:23
  • Thanks for the help @JulienDéramond . You actually solved it with your configuration. all I did was include ` ` tag thanks again .. you saved my day. – Mohamed Hussein Nov 27 '22 at 12:20

1 Answers1

0

**credits goes to @JulienDéramond **

after trying different bootstrap files .. the problem ended up solved by adding a

        <script src="./css/bootstrap-5.2.0-dist/js/bootstrap.bundle.js"></script>

to the html (more specifically .. using bootstrap.bundle.js not just bootstrap.js because it includes Popper.js in it.

Mohamed Hussein
  • 21
  • 6