Menu
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.
890
Widening Drop-down Lists The simple solution is to widen the column that the drop-down box is in. You can adjust the column manually by dragging the border of the column header.
On the worksheet where you applied the drop-down list, select a cell that has the drop-down list. Go to Data > Data Validation. On the Settings tab, click in the Source box, and then change your list items as needed. Each item should be separated by a comma, with no spaces in between like this: Yes,No,Maybe.
In General, Avoid Drop-Downs When There Are More Than 10 or Fewer Than 5 Options. Drop-downs quickly become difficult for users when they are presented with an overwhelming number of options to choose from. Take, for instance, a commonly included input in checkout forms, the “Country Selection” drop-down.
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:
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.
75
Truncation with tooltip would be my choice....
The last time i had to do that i used a telerik control, which was quite UI rich.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
