0

I have a problem with bootstrap drop-down menus. I have this basic template:

{% extends 'damage/base.html' %}

{% block body %}
<script src="{% static 'damage/bootstrap-4.1.1-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'damage\gijgo-combined-1.9.6\js\gijgo.min.js' %}" type="text/javascript"></script>
<script src="{% static 'damage\gijgo-combined-1.9.6\js\messages\messages.el-el.js' %}" type="text/javascript"></script>

<link href="{% static 'damage\gijgo-combined-1.9.6\css\gijgo.min.css' %}" rel="stylesheet" type="text/css" />
<script src="{% static 'js\moment.js' %}" type="text/javascript"></script>

<div class="container">

... 
            <div class="col-3" align="right">

                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                          style="color: white; width: 300px">
                    Επιλογή Περιόδου Ημερομηνιών
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="dateselected">
                    <li><a class="dropdown-item"  style="color: #062c33; width: 300px">Σήμερα</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #8a6d3b;">Τελευταία Εβδομάδα</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #721c24;">15-ήμερο</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #002a80;">Μήνας</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #a41515;">3-μηνο</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #333333;">6-Μηνο</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #721c24;">Ετος</a></li>
                  </ul>
                </div>

            </div>

        </div>
....
         <script type="text/javascript" src="{% static 'js\criteria_dates.js' %}" ></script>

    </form>

</div>

{% endblock %}

which extends the base template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} DEYA DEMO {% endblock %}</title>
    <!-- Loads the static files -->
    {% load staticfiles %}
    <!--<link rel="stylesheet" href="{% static 'damage/bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" >-->


    <link rel="stylesheet" href="{% static 'damage/bootstrap-4.1.1-dist/css/bootstrap.min.css' %}" >
    <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{% static 'damage/style.css' %}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="{% static 'damage/bootstrap-4.1.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'damage/font-awesome-4.7.0/css/font-awesome.min.css' %}" >


</head>
<body >
    {% include 'damage/menus/navmenu.html' %}

    {% block body %}
    {% endblock %}
</body>

whitch includes this navigation menu:

<div class="collapse navbar-collapse" id="#collapsenavbar">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-item nav-link " href="{% url 'index' %}">Αρχική<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item link">
            <a class="nav-item nav-link" href="{% url 'damage-add' %}">Νέα Βλάβη</a>
        </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Aναφορές
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="{% url 'damage-list-criteria' %}">Λίστα Βλαβών</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>
        </li>
        <li>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div>

All these work fine, except for the drop down menus. The problem is when I put the bootstrap.min.js on the basic template then drop down menu on nav-menu (id="navbarDropdownMenuLink") doesn't work but works the drop down on basic template (id="dropdownMenuButton") When I remove the bootstrap.min.js from the basic template then drop-down on drop down works the opposite.

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
kpk
  • 119
  • 3
  • 12
  • It would be best to cut the parts that are not relevant from the code you posted, this way it will be easier to debug. There's too much code. – schrodingerscatcuriosity Sep 26 '18 at 17:00
  • Hi. I cut some code. – kpk Sep 26 '18 at 17:18
  • You appear to be mixing CSS from Bootstrap 3 (`bootstrap-3.3.6-dist/css/bootstrap.min.css`) with JS from Bootstrap 4 (`bootstrap-4.1.1-dist/js/bootstrap.min.js`) which will not work - the two versions are not compatible. – solarissmoke Sep 27 '18 at 03:24
  • Hi. The bootstrap-3.3.6 link is comment. Unfortunatelly, this is not the problem. The strange behavior depend on `(bootstrap-4.1.1-dist/js/bootstrap.min.js)`. When I load it on basic template , drop down on navogation menu doesn't work. When I remove it , doesn't work the drop down on basic template. – kpk Sep 27 '18 at 06:06

0 Answers0