select-search: kleine hangende inspring in plaats van afkappen

De lijst hing vast aan de linkerrand van het veld en kon dus alleen naar rechts groeien. Bij een
veld rechts in het formulier bleef er niets over en viel elk label terug op afbreken. Ze kiest nu
eerst haar breedte met het volle venster beschikbaar, en schuift daarna zo ver naar links als
nodig om te passen.

Een label dat dan nog niet op één regel past loopt terug met een hangende inspring van 2.5ch, de
breedte van twee cijfers plus een streepje, dus precies het "10-" waarmee elke budgetcode begint.
Uitlijnen onder de omschrijving lag meer voor de hand, maar die inspring is zo breed als de code
en bij een lange code bleef er nauwelijks tekstbreedte over. De code zelf breekt nooit af, ook
niet op zijn eigen streepjes: daarvoor staat ze in een eigen span met white-space:pre, met de
spatie erbuiten zodat het eerste woord van de omschrijving wel kan terugvallen.

Tussen twee opties staat een haarlijn, want een meerregelige rij loopt anders over in de
volgende. highlight() tekent nu een stuk van het label in plaats van het geheel, zodat een
zoektreffer over de grens tussen code en omschrijving heen blijft kloppen. Het title-attribuut
kan weg: met terugloop staat het volledige label altijd op het scherm.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Glenn Goossens
2026-09-14 10:11:22 +00:00
co-authored by Claude Opus 5
parent 6e6d6d8fc6
commit 5d4df257b0
5 changed files with 152 additions and 33 deletions
+7
View File
@@ -46,6 +46,13 @@ Klik een dropdown aan en typ.
`{value, label, index}`. Wie de opties leverde beslist wat verwijderen betekent en past de
`<select>` aan, waarna de lijst zichzelf hertekent met behoud van de zoekterm en de plek van
de selectie.
- De lijst is breder dan het veld, tot 420px, en schuift daarvoor zo nodig naar links op. Een
veld dat rechts in het formulier staat krijgt dus dezelfde leesbare breedte als een veld links.
- De code (alles voor de eerste ` - `, als dat één woord is) breekt nooit af, ook niet op zijn
eigen streepjes. Past een label niet op één regel, dan loopt het terug met een hangende
inspring van `2.5ch`: net de breedte van het `10-` waarmee elke budgetcode begint, en elders
genoeg om te zien dat een regel bij de vorige hoort. Tussen twee opties staat een haarlijn,
want een meerregelige rij loopt anders over in de volgende.
- Boven 200 treffers toont het enkel het aantal. Verfijn dan je zoekterm.
## Recent