I have an admin header from Django which is divided in 2 columns with css grid. I included a JavaScript dropdown effect on the user icon to show other elements like "Change Password" and "Log Out" but the problem is that dropdown stays hidden inside the column, doesn't show outside.
I need to mention that drop-down stays in a container with clip-path: polygon applied.
How can I fix this?
Thanks in advance,
A newbie in web development
Images attached will show exactly the situation described above:
Forced height of header to show the dropdown:
Below you can find partial Django code:
{% 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 %}
Header code in 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>
I'm showing the CSS for the dropdown menu:
/* 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;}
