[HTML] Select dropdown verlengen

[fonsoy]

In een webapplicatie heb ik van de week enkele muziekcategorieën toegevoegd. Helaas krijg ik, omdat er teveel categorieën bestaan, in de select dropdown een ongewenste scrollbalk in Chrome. In Internet Explorer speelt het probleem niet, daar worden alle opties weergegeven


Gelukkig is de applicatie geheel opensource, dus ik kan er in gaan prutsen

Ik heb onderzocht op welke manier ik dit probleem kan aanpakken;
- Size attribuut, helaas vergroot deze niet de dropdown, maar alleen de select lijst.
- Creatief met javascript en een div container?

Het lijkt er op dat er niet een property bestaat om simpelweg de dropdown te verlengen. Wat is volgens jullie een elegante oplossing om dit aan te pakken?

[RM-rf]

je kunt bv chosen ( http://harvesthq.github.io/chosen/ ) overwegen: een jQuery plugin die functionaliteit en visuele weergave aan selectboxes toevoegt.
aangezien deze extensie html gebaseerd is, kun je de max-height via css aanpassen

[MueR]

De dropdown lekker laten zoals hij is. Rommelen met dergelijke elementen is meestal niet handig, zeker niet als het alleen maar is "om de scrollbalk weg te halen".

[418O2]

MueR schreef op woensdag 29 januari 2014 @ 13:50:
De dropdown lekker laten zoals hij is. Rommelen met dergelijke elementen is meestal niet handig, zeker niet als het alleen maar is "om de scrollbalk weg te halen".

Dat dus.

Je kan typen in een select he, dat maakt het wel makkelijker. En als het teveel opties zijn zou je het misschien met een autocomplete kunnen oplossen.

[_Thanatos_]

MueR schreef op woensdag 29 januari 2014 @ 13:50:
De dropdown lekker laten zoals hij is. Rommelen met dergelijke elementen is meestal niet handig, zeker niet als het alleen maar is "om de scrollbalk weg te halen".

Second.

Laatste dat je wil is bezoekers irriteren die opeens op een touchscreen met een eigen-gefrutselde dropdown moeten gaan priegelen, terwijl ze een near-fullscreen popup gewend zijn die het OS hen geeft (ik denk aan Android). En dan is het nog het altijd-heikele punt van keyboard-access - iets wat dropdown-replacement plugins bijna allemaal hopeloos in de soep laten lopen.

Niet doen dus, gewoon laten zitten.

[fonsoy]

Bedankt voor jullie feedback.

Het is duidelijk dat het eigenlijk een route is die helemaal niet belopen dient te worden. Jammer enerzijds, aangezien het prettig is om in één keer de juiste categorie te kunnen selecteren, in plaats van eerst te moeten scrollen.

Ik denk ook niet dat er een voor mij efficientere wijze is dan de dropdown, in deze usecase. Tot zover het huidige inzicht reikt, laat ik het wel zo. Desnoods kan ik nog de 'size' vergroten, zodat alle select opties doorlopend in beeld zijn. Dat moet ik nog even overdenken, wat voor mij beter werkt (het ziet er werkelijk niet uit, maar het is wel effectief).

[418O2]

Je kan de select aanklikken en typen he? En anders kan je naar een input met autocomplete kijken

[ Voor 4% gewijzigd door 418O2 op 01-02-2014 00:54 ]

[MueR]

_Thanatos_ schreef op vrijdag 31 januari 2014 @ 20:51:
Laatste dat je wil is bezoekers irriteren die opeens op een touchscreen met een eigen-gefrutselde dropdown moeten gaan priegelen, terwijl ze een near-fullscreen popup gewend zijn die het OS hen geeft (ik denk aan Android). En dan is het nog het altijd-heikele punt van keyboard-access - iets wat dropdown-replacement plugins bijna allemaal hopeloos in de soep laten lopen.

Dit inderdaad. Ik heb er helaas een keer een moeten schrijven omdat de klant echt niet om te praten was. Om dat kreng goed te laten werken heeft me een dag gekost. Dat was dan wel incl. goede keyboard support en met aardige mobile support, maar toch.. 8 uur voor een stomme dropdown.

[418O2]

MueR schreef op zondag 02 februari 2014 @ 11:44:
[...]


Dit inderdaad. Ik heb er helaas een keer een moeten schrijven omdat de klant echt niet om te praten was. Om dat kreng goed te laten werken heeft me een dag gekost. Dat was dan wel incl. goede keyboard support en met aardige mobile support, maar toch.. 8 uur voor een stomme dropdown.

Heb ik ook eens gehad. Wat een drama was dat. Heeft mij nog meer tijd gekost omdat t formulier dynamisch was en er on the fly items bij in moesten en de inhoud van de selects ook nog veranderde.

Later eruit moeten slopen want het werkte niet lekker op mobiele apparaten. Gelukkig had ik dat van tevoren niet aangegeven. En dat alleen maar omdat het "er mooi uitzag".

Met formulierelementen moet je gewoon niet klooien. Mensen (en browsers) kennen de standaardelementen en weten hoe ze werken.

[joint_me]

Daarnaast kan een default dropdown op een desktop buiten een browser venster waar nodig en houd deze standaard rekening met je viewport (omhoog als er onder geen ruimte meer is).