Material Dropdown button wont show dropdown items

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Material Dropdown button wont show dropdown items

Aakash Banerjee pro premium priority asked 7 years ago

I am using this code from https://mdbootstrap.com/components/dropdowns/#material-dropdowns <!--Dropdown primary--> <div class="dropdown"> <!--Trigger--> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown primary</button> <!--Menu--> <div class="dropdown-menu dropdown-primary"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <!--/Dropdown primary--> Button shows up on the page but does not show dropdown item list. Is there something i need to change in the code? Thanks. Aakash.

Damian Gemza staff commented 7 years ago

Hello, Are you using jQuery buttons on Angular? Or you selected wrong category ? If you use jQuery buttons for Angular, it won't work :) Instead of jQuery, please read Angular documentation https://mdbootstrap.com/angular/components/dropdowns/ Best Regards, Damian

Aakash Banerjee pro premium priority commented 7 years ago

Thank you Damian. It seems like when I copied the button code the site had switched to the jquery version and I needed the angular version of the dropdown button. Once I updated the code for angular version of the button, it worked fine.

Aakash Banerjee pro premium priority commented 7 years ago

Quick question - is there any way to use the color associated with btn-unique for the dropdown? Documentation lists the classes to be used for dropdown colors but I don't see the unique which the #880e4f pink darken-4 white-text.

Damian Gemza staff commented 7 years ago

Aakash, Do you want to change color of whole navbar or only dropdown button or place where dropdown items are placed or for dropdown component? Please tell me this and I'll try to help you. Best Regards, Damian

Aakash Banerjee pro premium priority answered 7 years ago

Hi Damian Thanks for your note. For the dropdown colors I am trying to use the button color as btn-unique however when the drodown item is clicked it is blue. So I was wondering how can I keep the color of the click on the dropdown item consistent with the button color btn-unique. https://imgur.com/a/d967G I appreciate your help. Aakash.

Damian Gemza staff answered 7 years ago

Hello Aakash, thanks for your's patiente. I have a workaround for you. Background color of dropdown's item is quite hardcoded, but you can change it in our styles. Please open /scss/bootstrap/_dropdowns.scss file, and look class: 
.dropdown-item{
...
&.active, &:active{
color: $dropdown-link-active-color;
 text-decoration: none;
 @include gradient-bg($dropdown-link-active-bg);
}
You have to add line background-color to this class, and comment line: 
@include gradient-bg($dropdown-link-active-bg);
After this reworks, you will set custom background color of dropdown's item after clicked. Let me know if it works for you. Best Regards, Damian

Aakash Banerjee pro premium priority commented 7 years ago

Thanks for this. I have updated the scss _dropdown.scss with this below as per your direction. <pre>&.active, &:active { color: $dropdown-link-active-color; text-decoration: none; background-color: #880e4f; // @include gradient-bg($dropdown-link-active-bg); }</pre> However, what exactly needs to be done in the component template below.   <pre><div class="btn-group" dropdown> <!--Trigger--> <button dropdownToggle class="btn btn-unique dropdown-toggle waves-light" type="button" mdbRippleRadius>Select Tool</button> <!--Menu--> <div class="dropdown-menu dropdown-default"> <a class="dropdown-item" *ngFor="let tool of tools" (click)="onSelect(tool)">{{tool}}</a> </div> </div></pre>

Damian Gemza staff commented 7 years ago

What do you want to change in component template? If you update your's scss and paste sample dropdown code to your's component, changes should be visible after saving files.
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

Resolved

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