Dropdown Menu not closing in navbar when using animated flip

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
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

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

Everton Gabriel pro answered 6 years ago

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

fmaeseele pro answered 6 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.

Jakub Strebeyko staff answered 6 years ago

Hi there guys,

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

Best,
Kuba

MDBootstrap staff pro premium 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

Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
fmaeseele
Pro User
92Support score
7Questions 6Answers
0Snippets likes 6Snippets