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
@@ -1,7 +1,7 @@
// ==UserScript==
// @name BIPP: doorzoekbare dropdowns
// @namespace https://github.com/glgoose/ua-userscripts
// @version 1.6.0
// @version 1.8.2
// @description Geeft elke <select> met veel opties een zoekveld met substring-zoeken.
// @author glgoose
// @license GPL-3.0-or-later