mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): ComboBox y Flyout se portan a document.body con position:fixed

Browse Source 
El panel desplegable de ComboBox se posicionaba con position:absolute dentro
de su propio contenedor. Cualquier ancestro con overflow:hidden/auto (un
Expander colapsable, el body de un DetailPopup, una tarjeta con scroll propio)
lo recortaba, dejando la lista invisible o cortada a la mitad -reproducido en
Configuracion > Apariencia, dentro del Expander-.

Fix: igual tecnica que Flyout -createPortal a document.body, position:fixed
calculado desde getBoundingClientRect() del trigger-, con cierre en click
afuera y en scroll de cualquier ancestro (capture:true, el scroll no
burbujea). De paso Flyout pasa de position:absolute a position:fixed por el
mismo motivo (evita un bug latente de desalineacion si la pagina esta
scrolleada).

Regla documentada en project-md-templates/UI-UX-WINDOWS.md (Kit de
componentes + do's/don'ts) para que no se repita en este ni otros proyectos.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-09-05 21:50:09 -05:00
parent 827d798ef8
commit 6b61e5cea7
3 changed files with 62 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/app.css
+6 -3
View File
@@ -105,10 +105,13 @@ button { font-family: inherit; }
.field-row > .field { flex: 1; min-width: 180px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
/* --- ComboBox --- */
/* --- ComboBox ---
El panel es un portal a document.body posicionado con `position: fixed` (top/left/width en
linea, calculados desde el trigger) — NUNCA anidado ni con position:absolute dentro de .combobox,
para no quedar recortado por un ancestro con overflow:hidden/auto (Expander, DetailPopup, etc.). */
.combobox { position: relative; }
.combobox-panel {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
position: fixed; z-index: 220;
background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg);
box-shadow: 0 8px 24px rgb(0 0 0 / .35); max-height: 240px; overflow-y: auto; padding: 6px;
}
@@ -213,7 +216,7 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
/* --- Flyout / menú contextual --- */
.flyout-backdrop { position: fixed; inset: 0; z-index: 90; }
.flyout-panel {
position: absolute; z-index: 100; background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
position: fixed; z-index: 100; background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
border-radius: var(--r-lg); box-shadow: 0 10px 28px rgb(0 0 0 / .35); padding: 6px; min-width: 180px;
}
.flyout-item {