javascript - Recommendations for dropdown menu items that are too wide?

Question

What kinds of options do I have when a dropdown menu is faced with text that is so wide that extending the menu's width to accommodate is not feasible? i.e. It breaks the page layout, or just looks too ugly if the dropdown is adjusted to fit the long item.

Truncation? Truncation plus full hover text? Don't allow items that long?

Anyone encountered any elegant solutions to this?

Thanks.

Answer 1

I realise I'm fairly late to this question, but I've been hunting for an answer and I may have found a fairly elegant solution.

Have a look here:

• http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
• http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

The first link talks about a couple of solutions before recommending a solution based on the second link.

The idea is that on click, you change the width of the <select> tag such that it is big enough to show the full text of the options. By keeping the <select> tag inside a div with overflow set to 'hidden', it doesn't screw with the rest of the page.

Try it out - it's a pretty good solution.