Dropdown aren't working: the list isn't showing up


Topic: Dropdown aren't working: the list isn't showing up.

MasterGeekMX asked 4 years ago

I am working on a Django project with the mockups app, and trying stuff I noticed that dropdown menus aren't working.

*Expected behavior*Dropdowns must display the contents when selected

*Actual behavior*The ripple animation of the button is the only thing that works. The dropdon never shows up.

*Resources (screenshots, code snippets etc.)*For those not familiar, mockups allows you to make HTML files as templates for your pages, with subsequent pages inheriting the design of the template, with no need to copy/paste common things.

Here is base.html (where MDB is installed via CDN):

<!DOCTYPE html>
{% load static %}
<xml:html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!-- Nav Bar -->
        <nav class="navbar navbar-light bg-warning">
            <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <img
                src="{% static 'images/logo.jpg' %}"
                height="100"
                alt=""
                loading="lazy"
                />
            </a>
            </div>
        </nav>

</br>

        {% block head %}
        <title>Mockups Socorrito</title>
        {% endblock head %}

        <!-- Font Awesome -->
        <link
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        rel="stylesheet"
        />
        <!-- Google Fonts -->
        <link
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
        rel="stylesheet"
        />
        <!-- MDB -->
        <link
        href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
        rel="stylesheet"
        />
    </head>
    <body>
        {% block content %}

        {% endblock content %}

        <!-- MDB -->
        <script
        type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
        ></script>
    </body>
    {% block script %}

    {% endblock script %}
</html>

and here is my test.html, with the stright up example from the dropdown doc page:

{% extends 'base.html' %}
{% load static %}

{% block head %}
<title>Test</title>
{% endblock head %}

{% block content %}
<!-- Basic dropdown -->
<button class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">Basic dropdown</button>

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>
<!-- Basic dropdown -->
{% endblock content %}

{% block script %}
{% endblock script %}

and here is the result:


Grzegorz Bujański staff answered 4 years ago

I don't have much experience with Django, but if I understand correctly the dropdown is added dynamically after the page is loaded? Dropdown is initialized after page load, if added dynamically it requires additional initialization. Try to initialize it with JS like in the API example: https://mdbootstrap.com/docs/standard/components/dropdowns/#api-section-usage


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
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Desktop PC
  • Browser: Firefox 86, Chromium 89
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No