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



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: 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
Tags