Working on a Django admin header that makes use of CSS grid to create two columns. I have added a JavaScript dropdown effect to the user icon for displaying options like "Change Password" and "Log Out". However, encountering an issue where the dropdown remains hidden inside the column and does not show outside.
Important to note that the drop-down is contained within a container with clip-path: polygon applied.
Seeking suggestions on how to resolve this issue?
Thank you in advance,
A newcomer to web development
Images linked below provide visual context of the described situation: https://i.sstatic.net/fMOnT.png
Header height adjustment to display the dropdown: https://i.sstatic.net/xvJX8.png
Partial Django code snippet provided below:
{% 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>
/* Dropdown functionality */
function openDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close dropdown on outside click
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 header code excerpt:
<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 styling for the dropdown menu:
/* Navbar Dropdown */
.dropbtn {
background-color: #0071ce;
color: white;
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;
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;}