Menus not dropping down in browser after setup with JHipster

Question

I have been using the JHipster Mini Book to learn AngularJS and Spring Boot but I've hit a snag near the beginning of the book, at page 14. So far, I have run "yo jhipster", created a PostgreSQL database, and installed material design with "bower install bootstrap-material-design --save" and "grunt wiredep", with the configuration edits described in the book. When I run "gradlew bootRun", everything starts up and I can browse to " http://127.0.0.1:8080 " and get the expected page shown in Figure 2 in the book.

The problem is that the drop-down menus do not drop-down, even after I log in.

I am using Windows 8.1 with node.js 5.2.0, npm 3.5.1, bower 1.7.0, and jhipster 2.26.1. Also PostgreSQL 9.4.5. I also had to install Visual Studio Express 2015 (with Update 1) and all related files so that node.js could work. Not to mention Python 2.7.1. I've worked through the issues mentioned at https://github.com/nodejs/node-gyp/issues/629#issuecomment-153196245 and Unable to Connect to GitHub.com For Cloning

I have used Google Chrome (Version 47.0.2526.106 m), and Internet Explorer (11.0.9600.18098) to test. I have checked that JavaScript is allowed in both browsers, and other JS-intensive websites work.

I recreated the project several times, so I don't think I'm leaving out any steps.

Since I'm new to AngularJS I don't know whether it is a JHipster problem or something wrong with my environment.

Where else could I look for problems?

UPDATE 22/12/2015

On page 13 of the JHipster book referred to above, there is an instruction on page 13 to run

bower install bootstrap-material-design --save

followed by

grunt wiredep

This adds some lines to src\\main\\webapp\\index.html (amongst other files)

<script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/material.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/ripples.js"></script>

The first of these is the problem - when I remove it, everything appears to work (except I haven't tested everything so may find a problem later). I don't know what the problem is with that .js file.

Answer 1

It's because you use bootstrap-material-design library, there are some evolutions about the dropdown of the navbar with bootstrap. If you want to fix it, 2 solutions:

• don't use bootstrap-material-design (like you said)
• if you want to use bootstrap-material-design you need to fix some html in the navbar.html file. More information here : https://stackoverflow.com/questions/34281965/material-design-theme-menu?answertab=oldest#tab-top

Answer 2

Are you running in your index.html?

<script type="text/javascript">
     $.material.init() 
</script>