Side scrolling in a SELECT box form element?

[tamarian]

Is there a way to have horizontal scroll bars in a select box box on a form? This is similar to vB's forum selection on the search page (attached), where you have a vertical scroll bar. But you have some long strings, they will be cropped, and unreadable. I've tried using thisngs like :

<select  name="pick[]"  style="width:95%;overflow:auto;" multiple="multiple">
$pick_list
</select>

But that doesn't work. Using the overflow width style in a DIV surrounding the select works, but the scrollbars are messed up. You need to scroll sideways, in order to see the vertical scrollbars....

Does anyone know if this is doable, and/or how?

TIA

[diades]

Hi Tamarian

No, you cannot control scrollbars in a select control. There are two alternatives:

• Set the width for the scrollbar via css
• Build your own custom select using dhtml. (is it really worth it?)

[tamarian]

Hi Tamarian

No, you cannot control scrollbars in a select control. There are two alternatives:

• Set the width for the scrollbar via css
• Build your own custom select using dhtml. (is it really worth it?)

Thanks for the info Diades.

Setting the width will not do (if I understood correctly), since the selectable items will often be larger than the screen width, with 150+ characters.

I'll check the dhtml path. Solving this problem is definitly worth it. It's not for the search/forum select box, but for another application, where the displayed items are long, and the user will need to be able to read the full string, to decide the selection.

[diades]

Things to consider

Things to take into consideration are:
Is a form control what is required? If it is, then the pseudo-select will have to have the capability of sending its selected value along with the other form values (on selection, send the selected "value" to a hidden input). If not, and the data (selection) is only being used locally then a containing div with childdivs for options will go a fair way to supplying your needs. For the extended "value" to be seen, have a separate "screen" (attached to it) for the control that can display the full data or, make the title attribute for the parent div take on the value of the text that you want the user to see on mouseover.

[tamarian]

Things to take into consideration are:
Is a form control what is required? If it is, then the pseudo-select will have to have the capability of sending its selected value along with the other form values (on selection, send the selected "value" to a hidden input).

Yes, it's part of an entry form, and rquires sending one or more selected items from the list to the server.

make the title attribute for the parent div take on the value of the text that you want the user to see on mouseover.

You know what, if I can show the full string on a mouseover over the item, I can do without displaying the full string in the select box, if the user can read the remainder on a mousover. But I think the title attribute is limited in length on most browsers. My Firefoxfox seems to clip the string at around the 70th character of the title attribute, when I use it within the <option> for each item. IE seem to ignore the title (and alt) for an <option> items.

[diades]

You know what, if I can show the full string on a mouseover over the item, I can do without displaying the full string in the select box, if the user can read the remainder on a mousover. But I think the title attribute is limited in length on most browsers. My Firefoxfox seems to clip the string at around the 70th character of the title attribute, when I use it within the <option> for each item. IE seem to ignore the title (and alt) for an <option> items

In that case investigate the use of custom "title" boxes, there are scripts out there ready to go. Keep in mind that if a user has scripting shut down then it will fall flat on its face.

[tamarian]

In that case investigate the use of custom "title" boxes, there are scripts out there ready to go. Keep in mind that if a user has scripting shut down then it will fall flat on its face.

I've seen those title boxes used, sort of a hybrid tooltip/popup used on menu items. I think that should do it! As long as the side effects, when scripting is disabled, is that they'll be able to see the first 80-90 characters, but not the tooltip.

Thanks for all the help!

[tamarian]

I've ran into another problem

I found a few good custom title/tooltip scripts, like this one:

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

And it works great for both IE and Mozilla.

The problem is that IE does not seem to act on onMouseover events within the <option> tag.

[diades]

No, it won't, that is why I suggested the custom select to use with the tooltip