bootstrap dropdown not working in electron

Question

Building an electron app using Angular JS. I installed a bootstrap nav menu on the main screen that works perfectly except for the dropdown nav items, they don't drop down when clicked. The code itself is a copy and paste from the nav sample from the bootstrap site.

Here is my package.json

{
 "name": "testapp",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "scripts": {
   "start": "electron ."
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
"   electron-prebuilt": "^1.2.2"
 },
 "dependencies": {
 "angular": "^1.5.6",
  "angular-route": "^1.5.6",
  "bootstrap": "^3.3.6"
 }

}

I installed bootstrap via NPM. In the head of my main.html I call the css from the node_module folder.

Below the body tag I have my script declarations as such:

 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="node_modules/angular/angular.min.js"></script>
 <script src="node_modules/angular-route/angular-route.min.js"></script>
 <script src="js/app.js"></script>

Again the rest of the nav items that are not dropdowns work great. Why would dropdowns not work here?

Thanks for the feedback.

Do you have any errors in window dev tools? – Michael Radionov Jun 14 '16 at 20:46 — Michael Radionov, Jun 14 '16 at 20:46
no errors, it just didn't work. – S.Hackamoto Jun 14 '16 at 20:49 — S.Hackamoto, Jun 14 '16 at 20:49

score 6 · Answer 1 · answered Apr 15 '17 at 13:14

I just ran into the same problem. The solution was dead simple. Just forgot to properly initialize JQuery onLoad.

Do something like this in your html-files:

<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

Dropdown code does not have to be added seperately for this.

score 0 · Answer 2 · answered Jun 14 '16 at 20:48

Not sure why but it appears I had to add the explicit bootstrap dropdown code. I added the dropdown.min.js into my bootstrap/dist/js folder and then referenced in my main.html under my call to the main bootstrap.min.js and now the drop down nav items work.

I had assumed the dropdown code was in the main bootstrap.js file? I wonder if it's common practice to have to include the dropdown js as a separate file?

score 0 · Answer 3 · answered Jul 22 '20 at 10:13

Dropdowns (in Bootstrap) are built on a third party library (Popper.js), which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript

download the source from: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

save it to your project folder and then import it at the HTML code :

that should work

bootstrap dropdown not working in electron

3 Answers3

Linked