Material Dropdown button wont show dropdown items

Aakash Banerjee asked 9 months 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 commented 9 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


Aakash Banerjee commented 9 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.


Aakash Banerjee commented 9 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.


Damian Gemza commented 9 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


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 answered 9 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


Aakash Banerjee commented 9 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>


Damian Gemza commented 9 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.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No