— en dit is niet theoretisch. Precies dit gaf op 22/08/2026 het beeld dat een
tester bij CreditSoft meldde: drie bijlagen, uitgesmeerd over de volle taghoogte, met tweehonderd pixels lucht
tussen elk bestand. Een tabel met een opgelegde hoogte verdeelt de overhoogte namelijk over de RIJEN, niet
over zichzelf. Hetzelfde geldt voor een DevExpress-component die intern een tabel rendert.
Pak de tabel in een `` en zet de klasse op die div. */
/* ── De inhoud van een tab die maar ÉÉN kind heeft ──────────────────────────────────────────────────────
⚠️ Dit is bewust `:only-child` en niet `> *`. De nota hierboven waarschuwt terecht voor die blinde vorm:
zodra een tab een toolbar NAAST een lijst heeft, krijgt die toolbar ook `flex: 1` en groeit hij mee. Welk
kind de vaste kop is en welk de scrollende romp, is app-kennis.
`:only-child` grijpt per definitie enkel wanneer er niets is om mee te concurreren — dan ís dat ene kind de
romp, en dat hoeft niemand te weten. Gemeten op 22/08/2026: de journaal-tabs in Nimble hebben precies één
wortelelement, en dat is de gewone vorm.
Waarom dit ertoe doet: tot vandaag moest élke app zelf een lijst onderhouden die haar tabwortels op `flex: 1`
zette (`.adm-fiche-tabinhoud > .journaal-taken, > .journaal-notities, …`). Van de zes gemeten apps had er
ÉÉN die lijst — CreditSoft — en de andere vijf wisten van niets. Niet omdat ze slordig waren, maar omdat het
werk was dat je moest wéten. Een tab met meerdere kinderen houdt gewoon zijn eigen lijst; die van CreditSoft
blijft dus staan en blijft nodig. */
/* ⚠️ `:not(.row)` — EN DIT WAS EEN ECHTE BUG, GEEN VOORZORG.
Een Bootstrap-`.row` is zelf al een flexbox met `flex-direction: row`. Is hij het enige kind van een
tabinhoud, dan greep de regel hieronder hem óók en zette er `flex-direction: column` op. Gevolg: de
kolommen stapelden ALTIJD onder elkaar, ongeacht `col-lg-6` en ongeacht de vensterbreedte, met de halve
fiche leeg ernaast.
Gemeld door de Cares-sessie als "een row wrapt niet onder 992 px". Ze hadden het symptoom bij de verkeerde
oorzaak gelegd — het heeft niets met de breakpoint te maken — en twee omwegen gemeten en verworpen. Terecht:
geen van beide raakte dit.
Nagemeten in de playground: `getComputedStyle(row).flexDirection` gaf `column`. Dezelfde row buiten de
fiche gaf `row` en stond netjes naast elkaar. Dát verschil wees het aan; drie eerdere experimenten
(speling op de breedte, `flex-shrink: 1`, container op `display: block`) verklaarden alle drie niets, want
ik zocht bij de verkeerde oorzaak. De vergelijking binnen/buiten was de meting die het besliste.
Waarom uitsluiten en niet repareren: een `.row` IS al de romp-vorm die deze regel wil maken. Hij heeft de
hoogte-doorgifte niet nodig en hij verdraagt de richting-omzetting niet. */
.adm-fiche-tabinhoud > :only-child:not(.row) {
/* ⚠️ Óók `display: flex`, en dat is een bewuste keuze met een risico. Zonder dit vult de WORTEL van de tab
wel de hoogte, maar geeft ze niets door aan wat erin zit — dan zie je een lange lege doos met de lijst
bovenaan, en dat is de fout die je niet meteen herkent als "keten gebroken".
Het risico: staat er in die wortel iets dat op een block-layout rekent, dan herschikt dit. Aanvaardbaar
omdat het enkel om een ENIG kind gaat — dat is in de praktijk altijd een blokcontainer — en omdat elke
andere schakel van deze keten dezelfde drie eigenschappen zet. Eén vorm, geen uitzondering. */
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.adm-fiche-tabinhoud .adm-vast {
flex: 0 0 auto;
}
.adm-fiche-tabinhoud .adm-vullend {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.adm-fiche-tabinhoud .adm-scrollt {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* De terugweg wanneer hij op een EIGEN RIJ staat — boven een lijst, een formulier of een dashboard. Op een
fiche zit dezelfde knop in de kopregel naast de titel en levert die kopregel de afstand; daar zet
AdmTerugKnop `Vrijstaand="false"` en verschijnt deze klasse niet.
`.5rem` sluit aan bij de `mb-2` die de CreditSoft-sessie in hun app-component gebruikte — dat was daar
gemeten en het werkt, dus geen reden om er iets anders van te maken.
⚠️ Deze klasse heette tot 0.181.0 `.adm-grid-terug`, en dat was een verkeerde naam. CreditSoft gebruikte hem
op negen beheerschermen ZONDER grid — dat werkte (hij zit niet onder `.adm-grid` genest), maar de naam
beloofde iets anders dan hij deed. Precies het soort naam waar iemand over een half jaar op afgaat en dan de
verkeerde conclusie trekt. Bovendien hoeft geen enkele app hem nog te kennen: AdmTerugKnop zet hem zelf. */
.adm-terugweg { margin-bottom: .5rem; }
/* "Nieuw"-badge bij het versielabel: verschijnt tot de gebruiker de release notes bekeken heeft.
Standaard `hidden` in de markup — adm-shell.js beslist. Zo ziet wie alles gelezen heeft geen flikkering. */
.nav-version-badge {
display: inline-block;
margin-left: .4em;
padding: 0 .4em;
border-radius: 999px;
background: var(--bs-primary);
color: #fff;
font-size: .62rem;
line-height: 1.5;
letter-spacing: .02em;
text-transform: uppercase;
vertical-align: middle;
}
.nav-version-badge[hidden] { display: none; }
/* Som van de tellers op een INGEKLAPTE sectiekop. Zonder deze regel zou een teller onder een dichte sectie
onzichtbaar zijn — en secties staan bij het openen van de app standaard dicht. Bij een open sectie staat
de badge er niet: dan zijn de items zelf zichtbaar met hun eigen teller. */
.nav-menu button.nav-section .nav-section-badge {
margin-left: auto;
margin-right: .4rem;
}
/* De "niet gevonden"-melding van een fiche. `pre-line` zodat een uitleg die uit meerdere alinea's bestaat ook
als meerdere alinea's leest — zonder dit worden regeleindes spaties en wordt het één lap.
`max-width` want een melding over de volle breedte van een breed scherm leest niemand. */
.adm-fiche-nietgevonden {
white-space: pre-line;
max-width: 46rem;
text-align: left;
}