Horizontal Scroll Bar in a Combo Box or a Listbox with Up/Down Arrow Key Press Functionality

• Download demo project - 8.6 KB
• Download source files - 1.9 KB

Introduction

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

The Problem

There are some limitations in Internet Explorer (IE) while rendering some HTML controls. One such control is the combobox (HTML) or the ListBox (ASP.NET).

Again, there are a couple of limitations, while rendering a combobox or a listbox in Internet Explorer:

• In a combobox, 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 tooltip.

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.

The Solution

There are a couple of things we need to work out to overcome the horizontal scrollbar issue in a combobox.

• As we know, Internet Explorer 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

<div id='divCollegeNames' 

  style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px" 

  onscroll="OnDivScroll();" >

<SELECT id='lstCollegeNames' size="8" 

  multiple onfocus="OnSelectFocus();" >

Couple of things we have to take care of at the script level:

//On scrolling of DIV tag.
function OnDivScroll()
{
    var lstCollegeNames = document.getElementById("lstCollegeNames");

    //The following two points achieve two things while scrolling
    //a) On horizontal scrolling: To avoid vertical
    //   scroll bar in select box when the size of 
    //   the selectbox is 8 and the count of items
    //   in selectbox is greater than 8.
    //b) On vertical scrolling: To view all the items in selectbox

    //Check if items in selectbox is greater than 8, 
    //if so then making the size of the selectbox to count of
    //items in selectbox,so that vertical scrollbar
    // won't appear in selectbox
    if (lstCollegeNames.options.length > 8)
    {
        lstCollegeNames.size=lstCollegeNames.options.length;
    }
    else
    {
        lstCollegeNames.size=8;
    }
}

//On focus of Selectbox
function OnSelectFocus()
{
    //On focus of Selectbox, making scroll position 
    //of DIV to very left, i.e., 0 if it is not. The reason behind
    //is, in this scenario we are fixing the size of Selectbox 
    //to 8 and if the size of items in Selectbox is greater than 8 
    //and to implement downarrow key and uparrow key 
    //functionality, the vertical scrollbar in selectbox will
    //be visible if the horizontal scrollbar of DIV is extremely right.
    if (document.getElementById("divCollegeNames").scrollLeft != 0)
    {
        document.getElementById("divCollegeNames").scrollLeft = 0;
    }

    var lstCollegeNames = document.getElementById('lstCollegeNames');
    //Checks if count of items in Selectbox is greater 
    //than 8, if yes then making the size of the selectbox to 8.
    //So that on pressing of downarrow key or uparrowkey, 
    //the selected item should also scroll up or down as expected.
    if( lstCollegeNames.options.length > 8)
    {
        lstCollegeNames.focus();
        lstCollegeNames.size=8;
    }
}

That's it!

Points of Interest

Impossible is just another hurdle on the track.

History

• 29^th January, 2006: Initial version of the article