Question

photo of the problem

您好，我正在使用有关应用程序中校园欺凌问题的网络应用程序。我想显示带有bullyng报告的表格。一个表格标题是“ Cursos”，它是所有学校课程的下拉菜单。问题是该表隐藏了下拉菜单的一部分（从第三个选项或课程开始），但是出现了滚动条以滚动到其余课程。我希望所有选项都出现，并且不想使用滚动条来滚动课程。任何想法（我是编程新手，所以我对css不太熟悉，如果这是一个菜鸟问题，对不起：)）（我在顶部添加了问题的照片）这是我的html：

{% extends "layout.html" %}

{% block title %}
    Reportes de Victimas
{% endblock %}

{% block main %}
<h1 class="display-3">Reportes de Víctimas</h1>
    <form action="/" method="post">
        <table class="table table-striped" id="myTableVict">
        <thead>
            <tr>
                <th>Escuela</th>
                <th>

                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
                      <span class="caret"></span></button>
                      <div class="dropdown-content"  id="divo">
                        <a href="#">Todos</a>
                        {% for hechito in hechitos %}
                        <a href="#">{{ hechito.curso }}</a>
                        {% endfor %}

                  </div>
                </th>
                <th>Descripción del hecho</th>
            </tr>
        </thead>

        <tbody>
<!--for is to loop in each row of the table of the selected database,you have to use { always with a space at left and right  and stock.nam the . because it is like opening a dict and chosing the column name -->

    {% for hecho in hechos %}
                <tr>
                    <td>{{ hecho.escuela }}</td>
                    <td>{{ hecho.curso }}</td>
                    <td>{{ hecho.hecho }}</td>

                </tr>
            {% endfor %}

        </tbody>
    </table>
    </form>
    <script>
              var table = document.getElementById("myTableVict");
              var inputs = table.getElementsByTagName("a");
          //    var rows = table.getElementsByTagName("tr");
              var rows = table.tBodies[0].rows

              for (var i = 0; i < inputs.length; i++) {

                var input = inputs[i];

                input.addEventListener("click", function () {
                  var selectedCourse = this.textContent.trim();

                //  alert(selectedCourse);
                  for (row of rows) {

                    let td = row.getElementsByTagName('td')[1]
                    if (!td) { continue }
                    let course = td.textContent.trim()
                    if (course === selectedCourse || selectedCourse == "Todos") {

                      row.style.removeProperty('display')
                    } else {
                      row.style.setProperty('display', 'none')
                    }
                    }
                });
              }

    </script>

{% endblock %}

CSS：

/* Dropdown Button */
.dropbtn, #naco {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* boton 2 */
.button1 {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Answer 1

您可以在这里检查代码吗？-

<thead>
        <tr>
            <th>Escuela</th>
            <th>

            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
                  <span class="caret"></span></button>
                  <div class="dropdown-content"  id="divo">
                    <a href="#">Todos</a>
                    {% for hechito in hechitos %}
                    <a href="#">{{ hechito.curso }}</a>
                    {% endfor %}

              </div>
            </th>
            <th>Descripción del hecho</th>
        </tr>
    </thead>

在此代码中您的div：-

<div class="dropdown">

您尚未完成此操作，因此才显示问题。只需在</div>之前完成即可使用

Answer 2

原因是，下拉列表实际上是在可滚动容器下呈现的。只要容器的高度受到限制，下拉菜单就应该被删除。因此，解决方案是使用JQuery在主体元素下方附加下拉列表。请添加此JQuery代码。

$(function() {
            var dropdownMenu;
            var dropdownButton;
            $('#dropdown-button').hover(function(e) {
            if (dropdownMenu) return;
              dropdownMenu = $(e.target).siblings('.dropdown-content');
 					dropdownButton = $(e.target);
                // detach it and append it to the body
                $('body').append(dropdownMenu.detach());
 
                // grab the new offset position
                var eOffset = $(e.target).offset();
 
                // make sure to place it where it would normally go (this could be improved)
                dropdownMenu.css({
                    'display': 'block',
                        'top': eOffset.top + $(e.target).outerHeight(),
                        'left': eOffset.left
                });
            }, function(e) {
              var children = dropdownMenu.find(e.relatedTarget);
              if (children.length === 0) {
                  $(e.target).parent().append(dropdownMenu.detach());
                  dropdownMenu.hide();
                  dropdownMenu = null;
                  dropdownButton = null;
              }
            });
            
            $('.dropdown-content').mouseleave(function(e) {
            	if (e.relatedTarget.id !== 'dropdown-button') {
                	dropdownButton.parent().append(dropdownMenu.detach());
                    dropdownMenu.hide();
                    dropdownMenu = null;
                    dropdownButton = null;
                }
            });
          });

表格隐藏的下拉表格标题

2 个答案: