Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sidebar dropdown positioning with fixed positioning to prevent overflow clipping and ensure proper menu display outside collapsed panels

Browse Source
This commit is contained in:
Bruno Charest 2026-03-22 10:17:22 -04:00
parent 5dc1907ace
commit f34f5ad708
2 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app.js
View File

@ -169,6 +169,7 @@
const options = dropdown.querySelectorAll('.custom-dropdown-option'); const options = dropdown.querySelectorAll('.custom-dropdown-option');
const hiddenInput = dropdown.querySelector('input[type="hidden"]'); const hiddenInput = dropdown.querySelector('input[type="hidden"]');
const selectedText = dropdown.querySelector('.custom-dropdown-selected'); const selectedText = dropdown.querySelector('.custom-dropdown-selected');
const menu = dropdown.querySelector('.custom-dropdown-menu');
if (!trigger) return; if (!trigger) return;
@ -184,6 +185,13 @@
dropdown.classList.toggle('open', !isOpen); dropdown.classList.toggle('open', !isOpen);
trigger.setAttribute('aria-expanded', !isOpen); trigger.setAttribute('aria-expanded', !isOpen);
// Position fixed menu for sidebar dropdowns
if (!isOpen && dropdown.classList.contains('sidebar-dropdown') && menu) {
const rect = trigger.getBoundingClientRect();
menu.style.top = `${rect.bottom + 4}px`;
menu.style.left = `${rect.left}px`;
}
}); });
// Handle option selection // Handle option selection

10
frontend/style.css
View File

@ -424,6 +424,15 @@ select {
/* Sidebar dropdown specific */ /* Sidebar dropdown specific */
.sidebar-dropdown { .sidebar-dropdown {
padding: 0 16px 12px; padding: 0 16px 12px;
position: relative;
}
.sidebar-dropdown .custom-dropdown-menu {
position: fixed;
z-index: 10000;
left: auto;
right: auto;
width: 248px;
} }
.sidebar-dropdown .custom-dropdown-trigger { .sidebar-dropdown .custom-dropdown-trigger {
@ -481,6 +490,7 @@ select {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
max-height: none; max-height: none;
height: auto;
padding-top: 0; padding-top: 0;
} }