Topic: Dropdown aren't working: the list isn't showing up.
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:
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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