Vertical Grid: Adaptivity

Zurück: Demo-Übersicht

Was das Eigenschaftsraster tut, wenn der Platz schmal wird: Beschriftung und Steuerelement kippen von nebeneinander auf untereinander, und die Fläche füllt weiter das Panel.

Status: Panel-Fill-Verhalten [Live]; Label/Control-Achsenkippe bei schmalem Container [Live].

propertyGrid()- Basiskontrakt bereits verstanden.

Wie beim DataGrid folgt propertyGrid() der Breite seines Panels (Drawer, Auxbar, Dialog) über dasselbe Container-getriebene CSS-Rezept – kein eigenes Breakpoint-Verhalten.

Kein zusätzlicher Aufruf nötig – Panel-Füll-Verhalten ist automatisch aktiv.

Gilt automatisch für jedes propertyGrid() in einem Panel-Container (Drawer, Auxbar, Dialog).

Dasselbe Container-getriebene CSS-Rezept (Zutaten 1–3) wie beim DataGrid – das Raster scrollt innerhalb seines Panels statt die Seite zu sprengen.

[Live] – derselbe Mechanismus wie bei Eingabefelder → Adaptivity (data-wk-stack-below-Attribut + scripts/adaptive.js, per ResizeObserver am Container gemessen – nie am Viewport), hier auf Raster-Ebene: unterhalb der mit $opts['stackBelow'] gesetzten Breite kippt die zweispaltige Aufteilung auf eine einzige Spalte (Label über Control statt nebeneinander, is-stacked-Klasse).

Das Kippen ist die zweite Antwort, nicht die erste. Die Spurdefinition selbst deckelt die Beschriftungsspalte (fit-content(22rem) minmax(0, 1fr), siehe Grundlagen), sodass auch ein nicht gekipptes Raster sein Steuerelement nicht aus dem Bild schieben kann. stackBelow entscheidet, ab welcher Container-Breite nebeneinander unleserlich wird – nicht, ob das Steuerelement erreichbar ist.

Kein zusätzliches Beispiel – Panel-Füll-Verhalten ist Teil des Basiskontrakts (s. Grundlagen).

Keine über die Feature-Seiten hinaus.

Container-getriebenes Responsive erfordert keine ARIA-Anpassung – es ändert nur Layout, keine Semantik.

Entfällt – kein beobachtbarer Fehlerfall über DataGrid → Adaptivity hinaus.

• Demo-Übersicht – alle Kategorien
• DataGrid: Adaptivity – geerbtes CSS-Rezept
• Eingabefelder: Adaptivity – identische Label-Achsen-Lücke