enhancement
major
minor
major
minor
major
#29990
React-UI: Panels und bedingte Inhalte nehmen in Split-Flächen, Tabs und Stacks die falsche Höhe
Problem
1. Ein <switch> direkt in einer Split-Fläche füllt sie nicht. Steht ein <switch> (oder ein <visible-if>) in einer .view.xml direkt in einer Fläche (<pane>) eines <split-panel>, so wird der angezeigte Inhalt nur so hoch wie sein eigener Inhalt, statt die Fläche auszufüllen. Ein <panel>, das direkt in der Fläche steht, füllt sie dagegen.
Beispiel: der Modell-Editor (Administration → Modell) wählt das Detail-Panel über einen <switch> nach der Art des gewählten Modellelements. Das Panel ist nur so hoch wie sein Formular, darunter bleibt die Fläche leer.
2. Ein Panel eigener Größe nimmt in einem Stack die ganze Höhe, sobald ein Geschwister-Panel füllt (Regression in 8.0.0-alpha11, gemeldet als #29982). In
{{{#!xml <stack>
<panel><title><en>A</en></title><inset><text .../></inset></panel>
<panel><title><en>B</en></title><table>...</table></panel>
</stack> }}}
in einem Tab spannt Panel A den ganzen Tab (sein Rumpf ist leerer Raum), Panel B zeigt nur noch seine Titelleiste am unteren Rand. Erwartet: Panel A so hoch wie sein Inhalt, Panel B füllt den Rest.
Ursache
- Jedes Panel (TLPanel) trug den Inline-Stil height: 100%, damit es eine Split-Fläche spannt: die Fläche (.tl-split__pane) ist ein gewöhnlicher Block, in dem der Füll-Vertrag (tl-fill, also flex: 1) nichts bemisst. In einem Stack, der eine bestimmte Höhe hat, weil ein Geschwister füllt, löst sich diese Höhe gegen den ganzen Stack auf (Problem 2).
- Der <switch> wird über den Deck-Pane (TLDeckPane, .tl-deck) gerendert, eine Box ohne eigene Größe. Die height: 100% eines Panels darin löst sich gegen diese Box ohne Höhe auf (Problem 1).
- Ein Kind einer Split-Fläche meldet seinen Füll-Wunsch am Split vorbei an dessen äußeren Behälter.
Lösung
- Begrenzte Regionen spannen ihren Inhalt: Die Bereiche, die ohnehin begrenzt sind und die Füll-Kette beenden - die Fläche eines Split-Panels, der Inhalt eines Tabs, der App-Shell und der Sidebar, der Rumpf von Fenster und Drawer (auch in den MUI-Adaptern für Tab-Leiste und Fenster) - tragen die Klasse tl-region des Design-Systems: ein Raster mit einer Zelle (grid-template-rows: minmax(0, 1fr), grid-template-columns: minmax(0, 1fr)), das seinen Inhalt auf die Höhe der Region streckt. Ein Panel mit Formular spannt die Region; ist sein Inhalt höher, scrollt der Panel-Rumpf, Titel- und Knopfleiste bleiben sichtbar. Ein füllender Inhalt (Tabelle, Tab-Leiste, PDF-Viewer) wird auf die Höhe der Region begrenzt und scrollt in sich. Die Split-Fläche beendet dazu wie die anderen Regionen die Füll-Kette (FillBarrier).
- Panel ohne feste Höhe: Das Inline-height: 100% des Panels entfällt. In einem Stack ist ein Panel eigener Größe damit so hoch wie sein Inhalt, ein füllendes Panel nimmt den Rest.
- Deck ohne eigene Box: Der Deck-Pane ist layout-transparent (display: contents). Das gezeigte Kind steht damit im Layout so, als stünde es selbst im Behälter des <switch>: ein Panel spannt die Fläche, ein füllender Inhalt füllt, Inhalt in einer Zeile (App-Bar, neben einer Breadcrumb) bleibt so groß wie sein Inhalt. Eine css-class an <switch> / <visible-if> gestaltet damit keine eigene Box mehr.
- Die CSS-Änderung liegt im Repository TopLogic/tl-design-system (Branch CWS/CWS_29990_switch_fills_split_pane) und ist in die Engine kopiert.
- React-Demo: die Dokumentanzeige zeigt den <switch> direkt in der Split-Fläche, mit einem eigenen Panel je Dokumentart; die Demo "Panels im Reiter" zeigt den Stack-Fall und ein einzelnes Panel eigener Größe in einem Tab.