Menu
So I am using Django to serve web pages.
I am trying to make sure I am able to download all the resources necessary to make the webpage function as intended for offline use (as in one of those resources could be unavailable for my client to request, so I want to be able to have my server serve those files). One of which is bootstrap 5.
I am trying to use their dropdown menu feature... according to their docs: "Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required."
Because I am so desperate to find a solution, I have inserted a bunch of <script> tags trying to rule out the problem... maybe its a bad idea.
All that said, I haven't been able to figure it out. Help :) ?
Please, let me know how I can improve this question. Thank you in advance!
{% load static %}
<html class="w-100 h-100">
<head>
<title>
Fonts
</title>
<!--Important meta tags-->
<!--Cancel zoom for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--example:-->
<!--href="{% static 'polls/style.css' %}"-->
<!--theme-->
<link rel="shortcut icon" type="image/jpg" href="{% static 'Pages/favicons/CES.png' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'Pages/css/main.css' %}">
<script src="{% static 'Pages/js/main.js' %}"></script>
<!--jQuery-->
<script src="{% static 'Pages/jQuery/jquery-3.6.0.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.min.js' %}"></script>
<!--bootstrap related-->
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
<style>
{% if fonts %}
{% for font in fonts %}
@font-face
{
{% if font.font_family %}
font-family: "{{font.font_family}}";
{% endif %}
{% if font.path %}
src: url("{{font.path}}");
{% endif %}
}
{% endfor %}
{% endif %}
</style>
</head>
<body class="m-0 p-0 w-100 h-100">
<button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Fonts</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="fonts">
{% if fonts%}
{% for font in fonts %}
<li><div class="dropdown-item" style="font-family: '{{font.font_family}}'; text-align: center;">{{font.font_name}}</div></li>
{% endfor %}
{% endif %}
</ul>
</body>
</html>
Further reading (from http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working) has shown that a new version of Popper is actually causing the problem... so... I will investigate a little more and see what I can do.
EDIT FOR ANSWER:
Just for testing purposes, I added this snippet from bootstrap's download page, and it works as expected. From here I went through all of my sources for bootstrap (not to mention that I folded and added the Popper CDN) and come to find out, something was wrong with my bootstrap.js file. After grabbing the newest distribution of it from npm (and putting the build into a subdirectory for my use) I exchanged the Popper CDN for its counterpart via npm as well (I downloaded it, went into node_modules/ @popper/core/..., found the min file and referenced it) and now it works like a charm... Last thing worth mentioning: ONLY USE THE .MIN. FILES!* so popper.min.js, bootstrap.min.js, bootstrap.min.css... having all the other files in script tags will cause bootstrap to not function properly.
<html class="w-100 h-100">
<head>
<title>
Menu
</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body class="m-0 p-0 w-100 h-100">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</body>
</html>
277
I received this error (TypeError: i.createPopper is not a function) each time when popovers should be shown. Previously I had to make use of the Separate Popper and Bootstrap JS (Option 2) - due to conflict with other scrips. However this is no longer necessary in my project, with Bootstrap 5.1.1.
Including only the Bootstrap bundle with popper - as per @Kevin's comment above - fixed the issue for me - And the previous conflicts don't seem to be an issue anymore. All popovers, tooltips, modals, sidebars etc. seem to now be working properly:
<body>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
For angular project make sure you have to use
"scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ].
45
I was including bootstrap.min.js instead of bootstrap.bundle.min.js
7
It happens because Bootstrap 5+ uses popper js for dropdown, and requires popper.js or popper.min.js to be declared in your script sources, or you can use bootstrap.bundle.js (or bootsrap.bundle.min.js).
So instead of just using:
<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />
Add popper js before:
<script src="[...YOUR_JS_CDN...]/popper.min.js" />
<script src="[...YOUR_JS_CDN...]/bootstrap.bundle.min.js" />
Or use bootstrap.bundle:
<script src="[...YOUR_JS_CDN...]/bootstrap.bundle.min.js" />
In your case, replace (since you redeclare bootstrap js again at the end):
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
And use only
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
