diff --git a/Client/Components/widgets/form.ts b/Client/Components/widgets/form.ts index 6d178ae..374afe7 100644 --- a/Client/Components/widgets/form.ts +++ b/Client/Components/widgets/form.ts @@ -27,6 +27,13 @@ export interface iForm { * übergeben; die aufrufende Maske ist für Styling und Callbacks * verantwortlich. */ extrabuttons?: m.Child[] + /** Wenn true, wird der scrollbare Inhaltsbereich der Form als + * Flex-Spalte gerendert. Masken können dann einzelne Kinder mit + * flex-Styles ausstatten, z.B. einen Bereich, der den verbleibenden + * Platz füllt (flex: '01 1 auto' + 'min-height': '0') und in sich + * scrollt, statt die gesamte Maske scrollbar zu machen. Wirkt nur + * zusammen mit stickyButtons (Default true). */ + flexContent?: boolean } export const Form:m.ClosureComponent = (vnode) => { @@ -126,6 +133,14 @@ export const Form:m.ClosureComponent = (vnode) => { // Container, die Buttons bleiben am unteren Rand fixiert. Das // umschließende form-Element wird zum flex-Container, damit das // Layout auch bei Fenstergrößenänderung stabil bleibt. + // Stil des scrollbaren Inhaltsbereichs; optional als Flex-Spalte + // (flexContent), damit Masken-Kinder den verbleibenden Platz + // füllen können. + const contentStyle: any = {flex: '1', 'overflow-y': 'auto', 'padding-right': '8px'} + if (vnode.attrs.flexContent === true) { + contentStyle.display = 'flex' + contentStyle['flex-direction'] = 'column' + } if (stickyButtons) { return m("form", { style: {display: 'flex', 'flex-direction': 'column', height: '100%'}, @@ -146,7 +161,7 @@ export const Form:m.ClosureComponent = (vnode) => { } }, // Scrollbarer Formular-Inhalt. - m("div", {style: {flex: '1', 'overflow-y': 'auto', 'padding-right': '8px'}}, + m("div", {style: contentStyle}, vnode.children ), // Fixierter Button-Bereich.