Vertical Grid: Adaptivity

Zurück: Demo-Übersicht

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 seit dem 25.08.2026 (fit-content(22rem) minmax(0, 1fr), siehe Grundlagen), sodass auch ein nicht gekipptes Raster sein Steuerelement nicht mehr 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