Dropdown aren&#039;t working: the list isn&#039;t sh

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

MasterGeekMX free asked 3 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:

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

MasterGeekMX

5Support score
1Questions 0Answers 0Snippets