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:
co-authored by
Claude Opus 5
parent
6e6d6d8fc6
commit
5d4df257b0
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user