Material Dropdown button wont show dropdown items

Topic: Material Dropdown button wont show dropdown items

Aakash Banerjee priority asked 7 years ago

I am using this code from https://mdbootstrap.com/components/dropdowns/#material-dropdowns  <div class="dropdown">  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown primary</button>  <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>  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 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 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

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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 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>  <button dropdownToggle class="btn btn-unique dropdown-toggle waves-light" type="button" mdbRippleRadius>Select Tool</button>  <div class="dropdown-menu dropdown-default"> <a class="dropdown-item" *ngFor="let tool of tools" (click)="onSelect(tool)">{{tool}}</a> </div> </div></pre>

Please insert min. 15 characters.

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.

Add comment

Aakash Banerjee priority answered 7 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Aakash Banerjee

20Support score
8Questions 4Answers 0Snippets