Раскрывающийся список JavaScript скрыт в столбце сетки css с примененным путем клипа - PullRequest
Новая
       10

Раскрывающийся список JavaScript скрыт в столбце сетки css с примененным путем клипа

0 голосов
/ 24 апреля 2020

У меня есть заголовок администратора от Django, который разделен на 2 столбца с сеткой css. Я добавил эффект JavaScript на значок пользователя, чтобы показать другие элементы, такие как «Изменить пароль» и «Выйти», но проблема в том, что раскрывающийся список остается скрытым внутри столбца, а не снаружи.

Я должен упомянуть, что раскрывающийся список остается в контейнере с clip-path: применяется многоугольник .

Как это исправить?

Заранее спасибо,

Новичок ie в веб-разработке

Прикрепленные изображения точно покажут описанную выше ситуацию: enter image description here

Принудительно высота заголовка для отображения выпадающего списка: enter image description here

Ниже приведен частичный код Django: 

{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{% block extrastyle %}{% endblock %}
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
{% block extrahead %}
    {{ block.super }}
    <script>
        /* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function openDropdown() {
          document.getElementById("myDropdown").classList.toggle("show");
        }
        // Close the dropdown if the user clicks outside of it
        window.onclick = function(event) {
          if (!event.target.closest('.dropbtn')) {
            let dropdowns = document.getElementsByClassName("dropdown-content");
            let i;
            for (i = 0; i < dropdowns.length; i++) {
              let openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }
          }
        }
    </script>
{% endblock %}

Код заголовка в Django

<div id="header">
        <div id="branding">
        {% block branding %}{% endblock %}
        </div>
        {% block usertools %}
        {% if has_permission %}
        <div id="user-tools">
            {% block welcome-msg %}
                {% trans 'Welcome,' %}
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            {% endblock %}
            {% block userlinks %}
{#                {% if site_url %}#}
{#                    <a href="{{ site_url }}">{% trans 'View site' %}</a> /#}
{#                {% endif %}#}
                {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                        <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> /
                    {% endif %}
                {% endif %}
            <div class="dropdown">
                <button onclick="openDropdown()" class="dropbtn"><img src="{% static "admin/img/user.svg"%}" alt="User Menu" style="height: 30px;"></button>
                <div id="myDropdown" class="dropdown-content">
                    {% if user.has_usable_password %}
                    <a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> /
                    {% endif %}
                    <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
                </div>
            </div>
            {% endblock %}
        </div>

Я показываю CSS для выпадающего меню: 

/* Dropdown in navbar */

.dropbtn {
  background-color: #0071ce;
  color: white;
  /*padding: 16px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #005ba6;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  /*overflow: auto;*/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
  right: 0.5rem;
}

.dropdown-content a {
  color: black !important;
  padding: 1rem 1rem !important;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

Ответы [ 3 ]

0 голосов
/ 24 апреля 2020

Я скопировал / вставил ваш код в фрагмент ниже, прокомментировал overflow: hidden; из #header, и, похоже, он работает, не так ли? 

/* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function openDropdown() {
        	const myDropdown = document.getElementById("myDropdown");
          const show = document.getElementById("myDropdown").classList.toggle("show");
          
          if(show){
          	const {top, left, width} = myDropdown.getBoundingClientRect();
            myDropdownClone = myDropdown.cloneNode(true);
            myDropdownClone.style.width = `${width}px`;
            myDropdownClone.style.top = `${top}px`;
            myDropdownClone.style.left = `${left}px`;
            myDropdownClone.style.position = 'fixed';
            myDropdownClone.id = 'myDropdownClone';
            document.body.append(myDropdownClone);
          } else {
          	document.getElementById("myDropdownClone").remove();
          }
          
        }
        // Close the dropdown if the user clicks outside of it
        window.onclick = function(event) {
          if (!event.target.closest('.dropbtn')) {
            let dropdowns = document.getElementsByClassName("dropdown-content");
            let i;
            for (i = 0; i < dropdowns.length; i++) {
              let openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }
          }
        }
#header {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  background: #417690;
  color: #ffc;
   /* overflow: hidden; */
   clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#header {
  background: #FFF;
  -moz-box-shadow: 0 3px 3px 0 rgba(148, 148, 148, 0.5);
  box-shadow: 0 3px 3px 0 rgba(148, 148, 148, 0.5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "logo navbar";
}

.dropbtn {
  background-color: #0071ce;
  color: white;
  /*padding: 16px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #005ba6;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  /*overflow: auto;*/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
  right: 0.5rem;
}

.dropdown-content a {
  color: black !important;
  padding: 1rem 1rem !important;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
<div id="header">
  <div id="branding">

  </div>

  <div id="user-tools">

    <strong>My name</strong>.

    <a href="#">View site</a>
    <a href="#">trans Documentation</a> /

    <div class="dropdown">
      <button onclick="openDropdown()" class="dropbtn"><img src="" alt="User Menu" style="height: 30px;"></button>
      <div id="myDropdown" class="dropdown-content">

        <a href="#">Change password</a> /
        <a href="#">Log out</a>
      </div>
    </div>
  </div>
</div>

[EDIT] Я отредактировал фрагмент кода, чтобы учесть clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);, упомянутый в комментариях

0 голосов
/ 26 апреля 2020

Лучшее решение, найденное для выпадающего внутри контейнера с путем клипа, это добавить дополнительный div, как в решении, найденном здесь: Как разместить выпадающий div по пути клипа?

0 голосов
/ 24 апреля 2020

Раскрывающийся контент должен быть абсолютно позиционирован и иметь более высокий z-индекс, чем контент, над которым вы хотите отобразить его.

Кодовая ручка или подобное поможет упростить эту задачу.

...