DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Das Aufgaben-Formular: was aufklappt, bekommt jetzt auch Platz

Browse Source 
Filipe, 22.09.2026, zum Bildschirmfoto: „wie scheisse sieht das aus,
verbesser das bitte." Zu sehen: „Anlegen" und „Abbrechen" lagen mitten
in der Personenliste.

GEMESSEN statt geraten, bei 1280 px mit aufgeklappter Liste:

    Zelle            Zeilen          Hoehe   Inhalt
    feld-verant      24px 44px          68      107
    feld-mehrere     43px 44px          87      261   <-- 174 zu viel

Jede Zelle des Formularrasters bekommt zwei Zeilen: Beschriftung oben,
Eingabe unten mit festen 44 px. Das ist richtig und der Grund, warum
alle Eingaben auf einer Linie sitzen (17.09.).

`feld-mehrere` ist aber keine Beschriftung mit Eingabe, sondern ein
Knopf mit einer Liste, die aufklappt. Ihr zweites Kind landet in der
44-Pixel-Zeile und laeuft heraus, sobald jemand sie oeffnet. Was
herauslaeuft, belegt keinen Platz -- also legt es sich ueber das
Naechste, und das Naechste sind die Knoepfe.

DIE MESSUNG HAT MICH VOR DEM NAHELIEGENDEN FEHLER BEWAHRT.
Erster Gedanke: „Zellen ohne eigene Eingabe brauchen die zwei Zeilen
nicht" -- `:has(> input, > select, > textarea)`. Die Messung sagt etwas
anderes: Von sieben Zellen haben SECHS ihre Eingabe nicht als direktes
Kind, weil der Auswahl-Baustein sie in ein <div> wickelt. Die Regel
haette fast das ganze Formular getroffen und genau die Ausrichtung
zerstoert, die sie schuetzen soll.

`aria-expanded` ist gemessen das einzige Merkmal, das nur bei dieser
Zelle steht -- und es ist das inhaltlich richtige: Es sagt „dieser
Bereich kann groesser werden". Etwas, das groesser werden kann, darf
keine feste Hoehe haben.

UND DIE PRUEFUNG, DIE ES HAETTE FINDEN MUESSEN
pruef-formulare war gruen -- sie klappt das Feld nie auf. Ein Zustand,
der nie hergestellt wird, kann nicht gemessen werden.

Neuer Abschnitt: Jedes Element mit `aria-expanded` im Formular wird
geoeffnet, danach darf keine Rasterzelle mehr Inhalt haben, als sie
hoch ist. Nicht diese eine Stelle, sondern die Eigenschaft -- damit
faellt auch die naechste auf, die es noch gar nicht gibt.

ZWEI ANLAEUFE DABEI WAREN FALSCH, und der zweite war der gefaehrliche:
  1. `scrollHeight` der Zelle meldete elf Zellen als kaputt, die alle
     in Ordnung sind: Der Hinweis unter einem Feld haengt seit dem
     17.09. absichtlich absolut darunter. Eine Warnung, die bei
     richtigem Verhalten anschlaegt, wird abgeschaltet.
  2. Nur die direkten Kinder im Fluss -- das war gruen, AUCH MIT DEM
     ECHTEN FEHLER. Nachgemessen mit zurueckgenommener Behebung:
     immer noch gruen. Das Raster staucht das Kind auf die feste
     Zeilenhoehe, das Kind bleibt also brav in der Zelle; was
     herauslaeuft, ist der Inhalt darin.

Jetzt misst sie in die Tiefe (ohne Teilbaeume unter absolut gesetzten
Elementen und ohne eigene Rollbereiche) und ist beidseitig belegt:
  mit Behebung    -> gruen
  ohne Behebung   -> FEHL „feld-mehrere: Inhalt reicht bis 169 px,
                     Zelle ist 87 px hoch"
Dazu eine Gegenprobe, die eine Zelle kuenstlich einklemmt.

Ueberlappungen im Formular: von 12 auf 4 -- und die vier sind Absicht
(der echte <select> liegt unsichtbar ueber seinem Knopf).

pruef-formulare, pruef-aufgabenbrett, pruef-css-klassen gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-22 14:58:45 +02:00
co-authored by Claude Opus 5
parent beb6bc2d62
commit 7ccf904c3c
41 changed files with 792 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/aufgaben.css
+40
View File
@@ -62,6 +62,46 @@
"verzogen" sieht. */
.neu__raster > * { display: grid; grid-template-rows: 1fr 44px; position: relative; }
/* EINE ZELLE, DIE AUFKLAPPT, PASST NICHT IN EINE FESTE ZEILE
(22.09.2026).
---------------------------------------------------------------------
Filipe zum Bildschirmfoto: "wie scheisse sieht das aus, verbesser das
bitte." Zu sehen: "Anlegen" und "Abbrechen" lagen mitten in der
Personenliste.
GEMESSEN bei 1280 px, aufgeklappt:
Zelle Zeilen Hoehe Inhalt
feld-verant 24px 44px 68 107
feld-mehrere 43px 44px 87 261 <-- 174 zu viel
Die Regel darueber gibt JEDER Zelle zwei Zeilen: Beschriftung oben,
Eingabe unten mit festen 44 px. Das ist richtig und der Grund, warum
alle Eingaben auf einer Linie sitzen (siehe 17.09.).
`feld-mehrere` ist aber keine Beschriftung mit Eingabe, sondern ein
Knopf mit einer Liste, die aufklappt. Ihr zweites Kind landet damit
in der 44-Pixel-Zeile -- und laeuft heraus, sobald jemand sie
oeffnet. Was herauslaeuft, belegt keinen Platz, also legt es sich
ueber das Naechste. Das Naechste sind die Knoepfe.
WARUM NICHT `:has(> input, > select, > textarea)`:
Das war der erste Gedanke -- "Zellen ohne eigene Eingabe brauchen
die zwei Zeilen nicht". Die Messung sagt etwas anderes: Von sieben
Zellen haben SECHS ihre Eingabe nicht als direktes Kind, weil der
Auswahl-Baustein sie in ein <div> wickelt. Die Regel haette also
fast das ganze Formular getroffen und genau die Ausrichtung
zerstoert, die sie schuetzen soll.
Gemessen ist `aria-expanded` das einzige Merkmal, das nur bei dieser
einen Zelle steht -- und es ist zugleich das inhaltlich richtige:
Es sagt "dieser Bereich kann groesser werden". Etwas, das groesser
werden kann, darf keine feste Hoehe haben. */
.neu__raster > *:has(> [aria-expanded]) {
grid-template-rows: auto;
align-content: start;
}
/* EIN HINWEIS UNTER EINEM FELD HAENGT UNTER DEM RASTER, NICHT DARIN
(17.09.2026).