5

One of the websites that we've been working on has a dropdown with <select> having multiple <option>s. In our Windows PC, the dropdown show only a number of items while on the client's Mac, the dropdown shows all the items at once. Now I found out that nothing was wrong with it, and I believe PCs with different screen resolution render the dropdown differently. But this isn't good enough considering that the users have to scroll down through 43 to 60 items to look for their desired selection.

So I was wondering if there's a good alternative for this (that doesn't use too much scripts or asks to load extra libraries).
The following screenshots will explain better.

Windows screenshot -
1

Mac screenshot -
2

Improve this question
2
  • PS: Check this link for details - webcityhome.com/client/aairportershuttle/reservation.php (On the Pickup Location, go to 'Pier' and select 'Pier no.')
    – DriftingSteps
    Dec 12, 2012 at 21:30
  • 2
    You don't need to update the question title when you have an accepted answer - the tick against the answer provides this feedback, and the number of answers indicator on the front-screen turns green too.
    – JonW ♦
    Dec 13, 2012 at 14:21

1 Answer 1

Reset to default
6

With this issue I would suggest to always stick with the way that Safari natively renders the drop down menu. This is what Safari users are already use to, and therefore the behaviour they expect. If a user has a screen with high enough resolution to show the whole list in that manner then you are effectively saving them time from having to scroll through a list (I understand it doesn't look great).

Alternatively, and probably more appropriately, you could ask: Is a drop down menu the best tool for this job?

What about a simple text input validated to only accept numbers 1-43?

Improve this answer
4
  • 3
    I agree. You should avoid very long drop-down menus, especially when people could enter the number much, much quicker into a text field.
    – Kit Grose
    Dec 12, 2012 at 22:40
  • True, I could simply use an text input and tell the users that they can type numbers only upto 43. And every time they'd type a number higher than 43, they'd get an error message. BUT, when your client strongly asks for a dropdown menu, there's very little that we can do. By the way, is there any script/code/technique that would have a <select> with up and down arrows to increase and decrease the values and showing only 1 value at a time? Like this photoshopped screenie - prntscr.com/m11gj
    – DriftingSteps
    Dec 12, 2012 at 22:46
  • 1
    I don't know, but it would take a long time to get to 43 with this widget and seems like an unnecessary further complication. Any scripts will just add weight and move away from what a user expects (people understand the standard browser form inputs). So I would suggest either leaving the drop box as it is with the understanding that it looks weird for high-resolution macs, or adopting a text box input
    – slawrence10
    Dec 12, 2012 at 23:02
  • Okay, thanks for your feedback. I'll talk with the client :)
    – DriftingSteps
    Dec 12, 2012 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.