Topic: Dropdown Menu not closing in navbar when using animated flipInY

fmaeseele pro asked 6 years ago


Hi, While testing the sample of the DropDown Form from https://mdbootstrap.com/components/dropdowns/#menu-forms, I added animation "animated flipInY" to the dropdown-menu. But now, once the menu is displayed, it cannot close wherever I click. Seems a bug to me, because other animations do not prevent the menu to be closed (fadeIn for example). Regards

MDBootstrap staff answered 5 years ago


Hi,

I created this example of an implementation for this weird button case. Hope it is enough for these animations. Thanks for the good advice about this implementation! https://mdbootstrap.com/snippets/jquery/pjoter-2-0/812021


Jakub Strebeyko staff answered 5 years ago


Hi there guys,

@fmaeseele - thanks for posting the walkaround! @Everton Gabriel does it solve your usecase?

Best,
Kuba


fmaeseele pro answered 5 years ago


Hi,

Don't know if it was fixed. Looking at the code of the animation, I managed to workaround the bug.

Inside the navbar code,

 <li class="nav-item dropdown align-middle">
<a class="nav-link dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="~/images/nophoto.png" alt="" class="profile-pic">
</a>
<div class="dropdown-menu dropdown-menu-right" data-dropdown-in="flipInY" data-dropdown-out="flipOutY">
<ul class="dropdown-user w-100">

The menu of the user.

</ul>
</li>

The deal is to use the data-dropdown-in and data-dropdown-out attributes to specify the desired animation.

 

Regards.


Everton Gabriel pro answered 5 years ago


Hi, has this bug been solved? How to fix this?


Jakub Strebeyko staff answered 6 years ago


Hi there fmaeseele, The bug report has been submitted, while dealing with it has been added to our development list. Thanks for letting us know! With Best Regards, Kuba

Please insert min. 20 characters.

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags