Dropdown is not working

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Dropdown is not working

Ajin Ananth asked 8 years ago

http://www.bitzburg.com, i'm using MDB for designing this site, the dropdown is not working. the mobile navigation also not working properly

Maximiliano Cesán Herrera commented 4 years ago

Check if you are using the right MDB. I get same problem with MDB Jquery navbar in Angular project! i switch to MDB Angular navbar and problems fixed.

admin5 pro answered 8 years ago

Had a quick look, here is my 2cents:
  1. The obvious one is that with the new changes the class open(MDB 4.2.0) was changed to show(MDB 4.3.0), your nav-item still get appended with the class open
  2. Your Solutions, Resources and Training dropdowns are missing the dropdown class next to nav-item
  3. The dropdown class next to nav-item should be removed from Portfolio and Contact
  4. The data-toggle on your three dropdowns should be set to dropdown
To get your code working, you need to fix number 1,2,4 With regards to point 1, I'm not exactly sure if it is your script files or stylesheet files but my guess is that there is one file that is still on an older version (either bootstrap-alpha5 or MDB-4.2.0). Ah I just saw your bootstrap.min.js is still alpha5, replace this with alpha6 and see if it fixes the problem. Cheers

Fabio Piazza answered 8 years ago

I just downloaded the complete package (MDB 4.3.0) and i had the same problem. To get it fixed i've changed some lines in Bootstrap (v4.0.0-alpha.5)... But i don't believe that's the best solution! I think that this is a common problem and needs to be fixed, i've also noticed that the links in the dropdown are displayed with wrong combination of color as you can see in the image Bug dropdown

admin5 pro answered 8 years ago

Hi Fabio, I agree that the combination on that specific dropdown is wrong, the reason this is happening is they forgot to add the class dropdown to that nav-item. Adding that class fixes the color combination. Just a question, why are you editing bootstrap4-alpha5 when you are using MDB-4.3.0? MDB-4.3.0 comes packaged with bootstrap4-alpha6, you can't use alpha5 with 4.3.0

charles@hangoutdoors.com pro answered 8 years ago

Alright so what is the fix for the "Show" vs "Open". What file and where should I modify it? I have downloaded the complete package and I get the issue that my drop downs on my nav-bar will not work.

Ajin Ananth answered 8 years ago

Hi admin5, thanks for the reply 1.The obvious one is that with the new changes the class open(MDB 4.2.0) was changed to show(MDB 4.3.0), your nav-item still get appended with the class open I get this 4.3.0 from NPM install, My bootstrap version is alpha 5 means ask MDB team to change the MDB node package. Package folder structure

admin5 pro answered 8 years ago

@Ajin, I use the pro version so I'm not using the npm repo (since it is just the free version), thus yes you are correct, whoever manages that repo needs to update the repo to the correct version. @Charles, all you need to do is update your bootstrap4 stylesheet to alpha6. alpha5 appends open to the dropdown, alpha6 appends show

Bartłomiej Malanowski staff pro premium answered 8 years ago

Hi, guys! Bootstrap 4 Alpha 6 renamed open to show so we had to change it too. Dropdown issue will be fixed in MDB 4.3.1

nysmoon answered 7 years ago

My dropdown seems to work and class "show" gets applied to it, BUT the opacity on class ".dropdown.show .dropdown-menu" stays "0", therefore it doesn't show up anyway.  What could be the reason for that?

I, of course, can force it to show with "!important", but I assume it shouldn't be the right way to fix this.

Thank you!
dropdown opacity
 

Lance commented 7 years ago

I would love to know the answer to this too. still a problem

culac answered 6 years ago

I use only basic dropdown example and it shows me a error: No provider for MdbCompleterDirective ("[ERROR ->]<div class="btn-group" mdbDropdown> <button mdbDropdownToggle type="button" mdbBtn color="primary" "): ng:///AppModule/DropdownComponent.html@0:0

Bartłomiej Malanowski staff pro premium commented 6 years ago

As I can see, it's an issue with MDB Angular. Could you please ask your question on the right category? https://mdbootstrap.com/support/cat/angular/

wexfordpartners answered 5 years ago

Had a lot of issues and now got it to work though it is slightly 'rigged' together.

I switched to bootstrap 3.3.7, used show instead of open, and updated the script to this:

 $('.second-button').on("click",function () {

console.log('click'); $('.animated-icon2').toggleClass('show');

if(!$('.animated-icon2.show').length && ('div#navbarSupportedContent23.show').length ) {

setTimeout(function(){

$('div#navbarSupportedContent23').removeClass('show'); }, 355); } });

Altafa6638 answered 5 years ago

Action Toggle Dropdown Action Another action Something else here 
                    <a class="dropdown-item" href="#">Separated link</a>
                  </div>
                </div>

For further details visit: Dropdown is not working

Bartłomiej Malanowski staff pro premium commented 5 years ago

As I can see, your dropdown is working fine. Did you fix your issue?

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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Ajin Ananth
10Support score
1Questions 1Answers
0Snippets likes 0Snippets