如何防止 CSS 标头使下拉列表在 Django 表单中消失答案

【问题标题】：How can I prevent CSS header from making drop downs disapear in Django form如何防止 CSS 标头使下拉列表在 Django 表单中消失
【发布时间】：2019-03-06 23:44:14
【问题描述】：

您好，我正在使用 modelforms 。我的条目之一是 ChoiceField，当我在 name.html 文件（表单页面的 html 文件）中有我的 CSS 标头时，页面不显示下拉菜单。当我在 name.html 中删除此标头时，会显示下拉菜单。谁能解释发生了什么？

名称.html

{% extends 'fitness/header.html' %}

{% block content %}
    <form method="post">
        {% csrf_token %}
        {{form.as_p}}
        <input type="submit" value="Submit">
    </form>

{% endblock %}

header.html

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</head>


<body>

  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Gainz.com</a>    <!––    Need to adjust this logo           ––>
      <ul id="nav-mobile" class="right 

      hide-on-med-and-down">


        {% if user.is_authenticated %}

          <li><a href="/profile">profile</a></li>
          <li><a href="/logout">logout</a></li>
          <li><a href="/dashboard">dashboard</a></li>
          <li><a href="/feed">feed</a></li>
          <li><a href="/forum">forum</a></li>
          <li><a href="/manual">manual entry</a></li>


        {% else %}

          <li><a href="/">Home</a></li>
          <li><a href="/feed">feed</a></li>
          <li><a href="/login">login</a></li>
          <li><a href="/register">register</a></li>

        {% endif %}

      </ul>
    </div>
  </nav>


  {% block content %}

  {% endblock %}


</body>




<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>

【问题讨论】：

标签： python css django django-forms choicefield

【解决方案1】：

确保将其添加到页面顶部：

<!DOCTYPE HTML> //always include this at the top of the page of your base file
<html>

脚本总是出现在页面底部之前关闭</body>标签：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static "tinymce/js/prism.js" %}"></script>
</body>
</html>

这通常使用footer.html 模板使用{% include 'footer.html' %} 呈现

我添加了<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> jquery 脚本，因为它看起来像 cloudfare materialize 脚本需要它（虽然我不确定）。无论如何，您应该在所有 html 文件上使用 jQuery！ ;-)

另外，我不确定这是否能解决您的问题，但确保您的所有元素都有结束标签（如果需要的话）通常是一种很好的做法。您的 name.html（或其他地方）上可能有一个随机的 <div> 标记，这会导致意外错误。

【讨论】：