This article describes:
- How to display a horizontal scroll bar in a select box (HTML) or listbox (ASP.NET).
- On pressing up or down arrow keys, the functionality should also work as expected.
There are some limitations in Internet Explorer (IE) while rendering some HTML controls. One of such controls is the combobox (HTML) or the
Again, there are a couple of limitations, while rendering a combobox or a listbox in IE:
- In a combo box, if width is specified and the length of the content is greater than the specified width, then a horizontal scrollbar won’t appear.
- Specifying the
title attribute won’t display the tool tip.
I’ve gone through many articles from the net with respect to putting a horizontal scroll bar in a combobox or a listbox, but none looked good.
Finally, I got some articles which explained how to put a custom horizontal scrollbar for a combobox or a listbox. But again, there are some limitations in a custom scrollbar as up and down arrow keys won’t work as expected. We can achieve horizontal scroll bar in a combobox using a
DIV tag by specifying the height and the width. Now, consider a scenario where the number of items in a combobox is greater than the specified height of the
DIV element. Now, if we press down/up arrow keys, it won’t work as expected, i.e.,we can’t see the selected item.
There are a couple of things we need to work out to overcome the horizontal scrollbar issue in a combobox.
- As we know, IE doesn’t support horizontal scrollbars in a combobox, so we have to go with the custom horizontal scroll bar. From the look and feel and user point of view, horizontal scrollbar will appear as a part of the combobox.
- Now we have added a
DIV tag on top of the combobox. To overcome up/down arrow key issue, we need to apply some tricks, so that it should behave as expected.
Using the code
style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"
<SELECT id='lstCollegeNames' size="8"
multiple onfocus="OnSelectFocus();" >
Couple of things we have to take care of at the script level:
var lstCollegeNames = document.getElementById("lstCollegeNames");
if (lstCollegeNames.options.length > 8)
if (document.getElementById("divCollegeNames").scrollLeft != 0)
document.getElementById("divCollegeNames").scrollLeft = 0;
var lstCollegeNames = document.getElementById('lstCollegeNames');
if( lstCollegeNames.options.length > 8)
Points of Interest
Impossible is just another hurdle on the track.
Initial version of the article - 29 Jan 2006.