Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: DropDown API Options not working

Anas Qiblawi free asked 3 years ago


for Example if I added this attribute

data-mdb-autoClose="outside"


Expected behavior

the dropdown list shouldn't close unless i tap outside it


Actual behavior

It closes whether I tap on it or outside of it


Code

    <div class="dropdown">
  <a class="dropdown-toggle d-flex align-items-center hidden-arrow float-end" href="#" id="AvatarDropdownMenuLink" data-mdb-autoClose="outside" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
    <img src="https://mdbootstrap.com/img/new/avatars/2.jpg" class="rounded-circle" height="30" alt="" loading="lazy" />
  </a>
  <ul class="dropdown-menu dropdown-menu-end border" aria-labelledby="AvatarDropdownMenuLink">
    <li>
      <a class="dropdown-item" href="#">My profile</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Settings</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Logout</a>
    </li>
  </ul>
  <div class="dropdown">

Resources (screenshots, code snippets, etc.)

https://mdbootstrap.com/docs/standard/components/dropdowns/#docsTabsAPI


Dawid Wajszczuk staff answered 3 years ago


Hi,

Try using data-mdb-auto-close="outside". Camelcase options are being used with JS options. For data attributes simply use kebab case. Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3299398#

Keep coding,
Dawid



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: ALL
  • Browser: FireFox
  • OS: ALL
  • Provided sample code: No
  • Provided link: Yes