extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Get Details / Groupbox to take all allowed vertical space and scroll internally if contents are too large

Browse Source
This commit is contained in:
nathan 2024-08-28 13:19:33 -06:00
parent 986e83750c
commit 57f8bc0a99
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api/js/etemplate/Layout/Et2Details/Et2Details.ts
View File

@ -53,7 +53,15 @@ export class Et2Details extends Et2Widget(SlDetails)
.details.hoist {
position: relative;
}
/*
.details .details__body {
height: calc(100% - 2em - 2 * var(--sl-spacing-medium));
overflow-x: hidden;
overflow-y: auto;
}
*/
.details.hoist .details__body {
position: absolute;
z-index: var(--sl-z-index-drawer);

34
api/js/etemplate/Layout/Et2Groupbox/Et2Groupbox.ts
View File

@ -8,7 +8,7 @@
*/
import {Et2Details} from "../Et2Details/Et2Details";
import {css, PropertyValues, html} from "lit";
import {css, PropertyValues} from "lit";
import shoelace from "../../Styles/shoelace";
import {property} from "lit/decorators/property.js";
import {customElement} from "lit/decorators/custom-element.js";
@ -31,17 +31,43 @@ export class Et2Groupbox extends Et2Details
...super.styles,
shoelace,
css`
slot[name="collapse-icon"], slot[name="expand-icon"] {
:host {
height: auto;
}
slot[name="collapse-icon"], slot[name="expand-icon"] {
display: none;
}
details {
height: 100%;
position: relative;
margin: 2px;
height: calc(100% - .5rem);
}
summary {
/* work around details not respecting flex
height is 100% - header - border radius
*/
.details__body {
height: calc(100% - 3em - var(--sl-border-radius-medium)) !important;
position: relative;
}
.summaryOnTop .details__body {
height: 100% !important;
position: relative;
}
.details__content {
overflow: hidden;
overflow-y: auto;
height: 100%;
}
/* end workaround */
summary {
pointer-events: none;
}