admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(absences): lift filter card stacking context so Reasons dropdown wins

Browse Source 
The Reasons multi-checkbox dropdown was rendering BEHIND the table
rows even with z-index: 1050 applied. Root cause: the filter card
and the table card are sibling .card elements, both creating their
own stacking contexts. The dropdown's z-index was being measured
inside the filter card's local stacking context, but the table card
(next sibling in document order) sat on top of the whole filter
card in the page's stacking order.

Fix: set position: relative + z-index: 10 on the wrapping <form
class="card mb-3"> so the entire filter card lifts above the table
card globally. The dropdown's z-index: 1050 inside it now resolves
correctly.

Pure template change — no behaviour change, no test change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-05-15 00:25:51 +02:00
parent 4368e53d95
commit 02c6d4da74
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/templates/core/absences/list.html
View File

@ -37,7 +37,11 @@ has an inline delete form. CSV export button only shows for admin.
{% endif %}
{# === Filter bar — 7 fields stacked on mobile, wrapped on desktop === #}
<form method="get" class="card mb-3">
{# Lift the filter card above the table card so the multi-checkbox #}
{# Reasons dropdown can overflow downward without being clipped by #}
{# the next sibling .card (the table). Requires `position: relative` #}
{# for z-index to apply. #}
<form method="get" class="card mb-3" style="position: relative; z-index: 10;">
<div class="card-body p-2 d-flex flex-wrap gap-2 align-items-end">
<div>
<label class="form-label small mb-0">Worker</label>
@ -78,6 +82,11 @@ has an inline delete form. CSV export button only shows for admin.
<button class="btn btn-outline-secondary btn-sm dropdown-toggle form-select-sm" type="button" data-bs-toggle="dropdown" style="min-width: 140px; text-align: left;">
{% if filter_reasons %}{{ filter_reasons|length }} selected{% else %}All{% endif %}
</button>
{# z-index: 1050 + the filter card's z-index: 10 (set on the #}
{# wrapping <form>) lifts this menu above the table card that #}
{# follows. The form-card lift is the real fix; the local #}
{# z-index here just keeps the menu above the form's own #}
{# inputs. #}
<ul class="dropdown-menu p-2" style="min-width: 220px; z-index: 1050;" onclick="event.stopPropagation();">
{% for key, label in reason_choices %}
<li>