Sign in


Sign up


Material Dropdown button wont show dropdown items

MDB SupportCategory: MDB AngularMaterial Dropdown button wont show dropdown items
Aakash Banerjee asked 4 months ago in MDB pro, version:4.3

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 replied 4 months 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 replied 4 months 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.

Aakash Banerjee replied 4 months 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.

Damian Gemza replied 4 months 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

2 Answers
Aakash Banerjee answered 4 months 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.

View post on imgur.com

I appreciate your help.

Aakash.

Damian Gemza answered 4 months 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

Damian Gemza replied 4 months 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.

Aakash Banerjee replied 4 months 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>