Topic: Dropdown div flickers / triggers twice
magikweb
priority
asked 5 years ago
Expected behavior
The notification div shows up when the bell icon is clicked.
Actual behavior
The notification div shows up, then flickers at the end of the animation (like it's redoing the animation, but faster). When reopening it a second time, it closes after its animation is over.
Resources (screenshots, code snippets etc.)
Here is the snippet we use:
<!-- Dropdown -->
<div class="dropdown mr-4 d-none d-lg-flex">
<!-- Toggle -->
<a href="#" class="text-muted" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon active">
<i class="fe fe-bell"></i>
</span>
</a>
<!-- Menu -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
<!-- Title -->
<h5 class="card-header-title">
Notifications
</h5>
</div>
<div class="col-auto">
<!-- Link -->
<a href="#!" class="small">
See all
</a>
</div>
</div>
<!-- / .row -->
</div>
<!-- / .card-header -->
<div class="card-body">
<!-- List group -->
|
</div>
</div>
<!-- / .dropdown-menu -->
</div>
If it's not a mistake from our HTML, we can provide a clean way to reproduce the problem on the target site directly (it's a private portal that requires the user to be logged in).
Thank you for any feedback! It's our first attempt with MDB and we're loving it so far.
Marta Wierzbicka
staff
answered 5 years ago
Hi,
when I removed all links you pasted to the snippet and this isn't necessary to do that and change icon syntax to our official one: <i class="fas fa-bell"></i>
https://mdbootstrap.com/docs/jquery/content/icons-list/, dropdown displays correctly: https://mdbootstrap.com/snippets/jquery/marta-szymanska/534148?view=project. What are these styles feather.css and insight.css? And why you use fe
instead of fas
/far
for an icon? We don't know all CSS libraries and we can't help with not MDB styles.
Best, Marta
Marta Wierzbicka
staff
answered 5 years ago
Hi,
I'm glad you will deal with the issue. As you see, sometimes, a lot of different styles and libraries can lead to a conflict between them.
Best, Marta
magikweb
priority
answered 5 years ago
Glad to know it's a conflict issue, we converted a Dashkit (Bootstrap 4 theme) to MDB. This is most likely where those libraries are from, we'll fix it up.
Thank you!
magikweb
priority
answered 5 years ago
Hello Marta, The font isn't loading right, but the behavior still happens.
Click the icon a few times and you should see what was previously described.
https://mdbootstrap.com/snippets/jquery/magikweb/533073
Marta Wierzbicka
staff
answered 5 years ago
Hi,
would you reproduce this issue in the snippet here: https://mdbootstrap.com/snippets/? It will be easier for me to help you when I see a live demo of your code in our snippets tool.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.7.5
- Device: PC
- Browser: Chrome 73
- OS: Windows 10
- Provided sample code: No
- Provided link: No