Image in dropdown menu


Topic: Image in dropdown menu

Casamayou maxime asked 3 years ago

I Tried to insert an image in my dropdown link. But when I click on it the menu is not showing. Instead I have to click on the text in the link to display the dropdown.

If I put a span, or an icon or an image I cannot activate the dropdown by clicking on them, I have to click on the text that is directly in the link.

How can I have a dropdown link button with an image and some text ?

Thank you

Here is a sample of my html code :

<div mdbDropdown class="dropdown">
<a
  class="dropdown-toggle nav-link"
  role="button"
  id="dropdownMenuLink"
  mdbDropdownToggle
  aria-expanded="false"
>Clickable
  <span
  class="hideText">Not clickable</span>
  <i class="fas fa-home "></i>
</a>

<ul
  mdbDropdownMenu
  class="dropdown-menu"
  aria-labelledby="dropdownMenuLink"
>
  <li><a class="dropdown-item" href="#">Mon compte</a></li>
  <li><a class="dropdown-item" href="#">Déconnexion</a></li>
</ul>

Arkadiusz Idzikowski staff commented 3 years ago

@Casamayou maxime Please edit your post and provide an example HTML/TS code so we can reproduce this problem on our end.


Casamayou maxime commented 3 years ago

@Arkadiusz Idzikowski I just edited the post with an example. Thanks for your help


Arkadiusz Idzikowski staff commented 3 years ago

@Casamayou maxime It looks like the same problem as mentioned in this thread: https://mdbootstrap.com/support/angular/how-to-toggle-dropdown-after-click-on-icon-using-mdb-angular-ui-kit/

We are already working on a fix. For now, please try to use the work-around I mentioned there.


Casamayou maxime commented 3 years ago

Ok thank you I used the work-around. It works, but please let me know when you have fixed it. Thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: Computer
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No