Wrap long-text in drop-down list?

Question

I have legibly long text in a drop-down list on my asp.net page. it violates the UI boundary and goes beyond the allocated region of UI.

Is there anyway I can wrap [

Answer 1

If you wanted to keep the UI representation of a native select box, there is a (rather nasty) way you could do it. It's rather manual, and I wouldn't really recommend it in general, but it could achieve what you want:

For each option in the list calculate a "width" based on the characters in that option's text. This should be a vague representation of the proportional font character widths (eg. ijtl=1, aopg = 2, m = 2.5, roughly, that sort of thing).

Anything that goes over a certain value (estimate this based on your available UI space) gets split at an appropriate point (a space, or hyphenate a long word - need to write an algorithm to do this). Repeat until you have no chunks over the desired size. You should end up with an array per option (some will be only length 1, if already short enough).

For each option with a matching array longer than 1, insert option nodes just after the original containing each of the subsequent chunks of text. Give them a particular class (eg. long-child), and the same value as the original. You should probably also give some visual indicator that it's a continuation of the previous item.

Supply an onchange event handler for the select, which checks to see if the selected option has the long-child class. If so, it should search preceding options to find the first which has the same value and does not have the long-child class. Set the selectedIndex to that option instead.

Like I said, nasty, but could achieve the effect you want. It might even be less code than Pawka's suggestion of rolling your own ;)