Gegeven: een lijst departementen, meer dan 15 en minder dan 25, die in de navigatie van elke pagina van een Who’s Who moeten ingepast worden (genre “vind mensen per departement”).
Oplossing lijkt voor de hand te liggen: een <select> met dan zo’n goeie oude jaren-‘90 onchange="location=this.options[this.selectedIndex].value;". erop.
Helaas: de ruimte die ik ter beschikking heb is welgeteld 150 pixels en in de <option>s moeten onvoorzienbaar lange gegevens moeten komen, van het genre
- Communications Service
- Département d’études politiques et administratives européennes
- ICT Service
- Bibliothèque (Campus Bruges)
Grr.
En ik wil absoluut zo’n lijst hebben. Dan maar tegen mijn principes in een veld (wat zeg ik, twéé velden!) bijgemaakt in de database, genre shortname_en en shortname_fr. Niet dat ik er fier (of content) over ben, maar dat probleem is wel, in de beste loodgieter-programmeerstijl-traditie, opgelost.
Zit ik nog met de <select> zelf: die onchange is, in deze Brave New World van niet-obtrusief javascript, eigenlijk echt wel niet meer des tijds. Maar er is geen plaats voor nog een “go”-submit-knop.
Grr.
…
Allez ju, ‘t zit erin. Om te tonen dat ik het niet slecht voorheb met onze vrienden de keyboardnavigatoren, maak ik de eerste <option> hardgecodeerd “List all departments”. Zo.
[dat allemaal om te zeggen dat ik nog altijd niet aan nieuws bezig ben, ik krijg er mijn hoofd niet rond]
update: een style op de select zetten, zegt Jurgen. Ja, wel. Zover was ik ook al, om er voor te zorgen dat het ding in geen geval breder dan 150px wordt. Maar dat lost het probleem van de lengte van de option-tekst niet op, of tenminste, niet in alle browsers:
En gezien wij op het werk overwegend, pakweg zo, oh, 99.9% Internet Explorer gebruiken…
Misschien kan een streepje css hier uitkomst bieden?
select{
width: 150px;
}