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.

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 '12 at 14:21

1 Answer
1

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?

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
–
DriftingStepsDec 12 '12 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
–
slawrence10Dec 12 '12 at 23:02