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.

walkslowly walkslowly · Accepted Answer · 2017-04-15T13:14:33

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.

bootstrap dropdown not working in electron

3 Answers