URL: https://www.peterbe.com/plog/better-select-boxes/demo.html

If you look at the Add Issue form on the Demo issue tracker you should see the three select boxes (aka. drop downs) and if these become too long they tend to be difficult to use. Here's a potential solution that; I just need to know what you people thing about it's usability.

I use onfocus() and onblur() to change the size attribute of the select input element thus temporarily giving the user a bigger workspace. Please have a play on this demo page and return here after for feedback.

The disadvantage with this, in terms of usability, is that it's unexpected and might not work exactly the same in all browsers. When the drop down expands it also shifts all surrounding content downwards which might make the user feel dizzy when the page "flickers".

Personally I think it's a great feature because drop downs are often difficult to work with if there are many options and the size is small. Another advantage which this "hack" is that it degrades perfectly in browsers that don't support javascript and it works independently of the mouse.

Comments

Peter Bengtsson

Update. Just checked. It works in IE6.

Ian Bicking

Incremental search (with a text box above the select) is another way to handle the same basic issue, I think.

Peter Bengtsson

And what is incremental search?

Ian Bicking

When you start typing, it starts filtering the choices. So in Javascript you'd look for onkeypress or something, and then do a substring search of the contents of the select, and hide any options that didn't match what was in the box.

Sascha Welter

OK, it's unexpected, but one gets the hang of it real fast. It's very logical to see what happens. Nice, I would say.

Your email will never ever be published.

Previous:
The Geeks Revenge April 29, 2005 Misc. links
Next:
Jacobian highlighter May 2, 2005 Python
Related by category:
Fastest way to find out if a file exists in S3 (with boto3) June 16, 2017 Web development
Be very careful with your add_header in Nginx! You might make your site insecure February 11, 2018 Web development
<datalist> looks great on mobile devices August 28, 2020 Web development
How to have default/initial values in a Django form that is bound and rendered January 10, 2020 Web development
Related by keyword:
Adding client-to-server sync to PissueTracker March 20, 2025 React, JavaScript, Bun
Starting a side project: PissueTracker March 16, 2025 React, JavaScript
ToDo apps I gave up on in 2010 January 3, 2011 Wondering
Plone.org calls it Issue Tracker May 14, 2005 Zope