Navbar Dropdown not working

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Navbar Dropdown not working

bronnie99 pro asked 7 years ago

Hello, I downloaded the latest Pro version from git.mdbootstrap.com/mdb/angular/ng-pro.git, ran thru the npm Pro installation instructions at https://mdbootstrap.com/angular/5min-quickstart/ and then started to follow the tutorial at https://mdbootstrap.com/corporate-website-lesson-1. The dropdown menu item is not working and looking thru the support forums, I'm having a hard time finding a jQuery-free solution. Can I get some assistance in getting this resolved? Also, I noticed one of the things I get with the Pro version is the 500+ premium components.  Is there documentation and examples available for those components? Thanks, Ronnie

ppulfer pro commented 7 years ago

I have the same issue on MDB 4.4.3 for Bootstrap. Navbar Dropdown and launching modals does not work anymore. Browser Console tells me the following (might be useful for troubleshooting): " Uncaught ReferenceError: Popper is not defined at bootstrap.min.js:6"

ppulfer pro commented 7 years ago

I've found the source of the issue. Apparently you need load the file "popper.min.js" for these to work. I'm afraid it's not mentioned in the navbar page (https://mdbootstrap.com/components/navbar/) nor anywhere if you upgrade your project from an older version. Hope this helps!

bronnie99 pro commented 7 years ago

I’ve added the “popper.min.js” entry into my scripts section within .angular-cli.json: “scripts”: [ “../node_modules/popper.js/dist/popper.min.js”, “../node_modules/chart.js/dist/Chart.js”, “../node_modules/easy-pie-chart/dist/easypiechart.js”, “../node_modules/screenfull/dist/screenfull.js”, “../node_modules/hammerjs/hammer.min.js” But still not getting any drop down items. Any other thoughts?

Dawid Adach pro answered 7 years ago

Dear bronnie99, Tutorial which you have pointed is dedicated for MDB jQuery version and it won't work with Angular. If you would like to make it working please use components from Angular documentation: https://mdbootstrap.com/angular/components/navbars/ Please note version indicator on the right side of our website and make sure that whenever you are browsing documentation, correct version (Angular) is chosen. Unfortunately, we do not have a single page showing all possible components as this would be too much for a single page.  We have placed most important components here: https://mdbootstrap.com/angular/components/ Rest of the components is available in our documentation on the left side.      

Alex GuaMi pro commented 7 years ago

STILL DOESNT WORK!

Dawid Adach pro commented 7 years ago

Alex, what exactly doesn't work? Please keep in mind that this tutorial is for jQuery so even you try use Angular Navbar code, following lessons won't work either as they are they also use jQuery code which is not compatible with Angular version.

Scooter Brown answered 7 years ago

I installed mdb angular and also doesnt work

Damian Gemza staff commented 7 years ago

Dear Scooter, could you describe me, what exactly doesn't work for you? Some code, screenshots, environment information would be helpful. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
bronnie99
Pro User
0Support score
2Questions 0Answers
0Snippets likes 0Snippets