Portal container ⋮ menu to body to stop row steal and scrollbars
Release rolling / release (push) Successful in 8m27s
Release rolling / release (push) Successful in 8m27s
Replace Bootstrap table dropdowns with a fixed body-portaled menu so hovering other rows no longer opens their menus and the open menu no longer expands table overflow.
This commit is contained in:
+27
-72
@@ -2372,8 +2372,6 @@ textarea::placeholder {
|
||||
flex-wrap: nowrap;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container-actions-primary {
|
||||
@@ -2386,59 +2384,52 @@ textarea::placeholder {
|
||||
white-space: nowrap;
|
||||
width: 10.5rem;
|
||||
max-width: 10.5rem;
|
||||
overflow: visible !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container-actions-more {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.container-actions .btn {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* In-table menus stay hidden — open menu is portaled to body */
|
||||
.container-actions .dropdown-menu:not(.pd-portaled-actions-menu),
|
||||
.container-actions-dropdown-menu:not(.pd-portaled-actions-menu) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* ⋮ more-actions menu: Popper strategy "fixed" (app.js initContainerActionsDropdown)
|
||||
* so the menu escapes table paint order and stays above toolbars/titlebar.
|
||||
* z-index must beat #titlebar (1100), #sidebar (1000), activity tray (1200).
|
||||
* Stay below full-screen modals (3000).
|
||||
* Portaled ⋮ menu (appended to <body> while open).
|
||||
* position:fixed + high z-index — never expands table overflow/scrollbars.
|
||||
*/
|
||||
.container-actions-cell .dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container-actions .dropdown-menu,
|
||||
.container-actions-dropdown-menu {
|
||||
.pd-portaled-actions-menu,
|
||||
.dropdown-menu.pd-portaled-actions-menu,
|
||||
.container-actions-dropdown-menu.pd-portaled-actions-menu {
|
||||
position: fixed !important;
|
||||
z-index: 10050 !important;
|
||||
min-width: 11.5rem;
|
||||
max-height: min(70vh, 28rem);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
font-size: 13px;
|
||||
z-index: 2800 !important;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--bg-elevated) !important;
|
||||
}
|
||||
|
||||
/* Popper fixed menus — keep above everything short of modals */
|
||||
.container-actions-dropdown-menu.show,
|
||||
.dropdown-menu.container-actions-dropdown-menu.show {
|
||||
z-index: 2800 !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
margin: 0 !important;
|
||||
inset: auto !important;
|
||||
transform: none !important;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--bg-elevated) !important;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Closed menus must never paint (Popper leftovers / list refresh desync) */
|
||||
.container-actions .dropdown-menu:not(.show),
|
||||
.container-actions-dropdown-menu:not(.show) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Containers table shell */
|
||||
/* Containers table shell — never unlock overflow when menu open */
|
||||
#containers-view .table-responsive {
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto;
|
||||
@@ -2449,55 +2440,19 @@ textarea::placeholder {
|
||||
}
|
||||
|
||||
#containers-view .table {
|
||||
overflow: visible;
|
||||
width: 100% !important;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/* Text truncates by default; actions cell stays usable */
|
||||
#containers-view #container-list > tr > td {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#containers-view #container-list > tr > td.container-actions-cell {
|
||||
overflow: visible !important;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Critical: elevate the ENTIRE open row above following rows.
|
||||
* Raising only the actions cell is not enough — later <tr> still paint over the menu.
|
||||
*/
|
||||
#containers-view #container-list > tr.row-menu-open,
|
||||
#containers-view #container-list > tr:has(.dropdown.show),
|
||||
#containers-view #container-list > tr:has(.dropdown-menu.show),
|
||||
#container-list > tr.row-menu-open,
|
||||
#container-list > tr:has(.dropdown-menu.show) {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#containers-view #container-list > tr.row-menu-open > td,
|
||||
#containers-view #container-list > tr:has(.dropdown.show) > td,
|
||||
#containers-view #container-list > tr:has(.dropdown-menu.show) > td {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#containers-view #container-list > tr.row-menu-open > td.container-actions-cell,
|
||||
#containers-view #container-list > tr:has(.dropdown.show) > td.container-actions-cell {
|
||||
overflow: visible !important;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
/* Search / filter toolbar must not stack above open action menus */
|
||||
#containers-view .page-header,
|
||||
#containers-view .view-toolbar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
/* Do NOT elevate open rows — that stole mouse events over rows below */
|
||||
|
||||
/* Accordion bodies must stay collapsed when not .show (defensive vs BS CDN lag) */
|
||||
.accordion-collapse.collapse:not(.show) {
|
||||
|
||||
Reference in New Issue
Block a user