Click here to Skip to main content
13,868,826 members
Click here to Skip to main content
Add your own
alternative version


43 bookmarked
Posted 29 Jan 2006
Licenced CPOL

Horizontal scroll bar in a combo box or a listbox with up/down arrow key press functionality

, 29 Jan 2006
Rate this:
Please Sign up or sign in to vote.
This article describes getting a custom horizontal scroll bar in a combobox or a listbox with functionality as expected on pressing of up or down arrow keys.

Sample screenshot


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 of such controls is the combobox (HTML) or the ListBox (ASP.NET).

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.

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, 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

<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 achieves 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 vertival scrollbar
    // won't appear in selectbox
    if (lstCollegeNames.options.length > 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 Selecbox 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 exremely 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)

That's it.

Points of Interest

Impossible is just another hurdle on the track.


Initial version of the article - 29 Jan 2006.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
United States United States
My name is Shiby Chacko. Currently I'm staying in Bangalore, the Silicon Valley of India. Working in product/service based software company. Working as senior software developer. Learning/experimenting new thing in software is my passion. Also I luv to enjoy life with my surrounding friends/people.

As an update, now I work with Microsoft as consultant in US

You may also be interested in...


Comments and Discussions

GeneralScrollable select drop down list with tool tip Pin
NagendraMN14-Sep-09 21:49
memberNagendraMN14-Sep-09 21:49 
GeneralVertical scrollbar Pin
Nupur080620-Jan-09 6:24
memberNupur080620-Jan-09 6:24 
GeneralAdvanced ListBox Component Pin
danludwig21-Jun-07 5:35
memberdanludwig21-Jun-07 5:35 
GeneralYour Drop Down List/List Box Tool Pin
howardjr4-Oct-06 7:42
memberhowardjr4-Oct-06 7:42 
NewsScrollableListBox Pin
Evyatar Ben-Shitrit15-Jun-06 9:59
memberEvyatar Ben-Shitrit15-Jun-06 9:59 
QuestionRe: ScrollableListBox Pin
smithasathyam12-Nov-06 21:01
membersmithasathyam12-Nov-06 21:01 
AnswerRe: ScrollableListBox Pin
smithasathyam12-Nov-06 21:04
membersmithasathyam12-Nov-06 21:04 
GeneralAnother Issue Pin
Tboner24-Feb-06 10:55
memberTboner24-Feb-06 10:55 
QuestionRe: Another Issue Pin
jobaz5419-Jun-08 0:16
memberjobaz5419-Jun-08 0:16 
GeneralTweaked functions Pin
PMDL17-Feb-06 10:05
memberPMDL17-Feb-06 10:05 
AnswerRe: Tweaked functions Pin
Shiby20-Feb-06 22:41
memberShiby20-Feb-06 22:41 
GeneralAlmost... Pin
Tboner14-Feb-06 6:32
memberTboner14-Feb-06 6:32 
GeneralRe: Almost... Pin
PMDL17-Feb-06 10:12
memberPMDL17-Feb-06 10:12 
GeneralRe: Almost... Pin
PMDL17-Feb-06 10:41
memberPMDL17-Feb-06 10:41 
GeneralRe: Almost... [modified] Pin
zivros2-Jan-07 0:24
memberzivros2-Jan-07 0:24 
GeneralRe: Almost... Pin
danludwig11-Jun-07 7:14
memberdanludwig11-Jun-07 7:14 
GeneralCool Pin
Voldo8012-Feb-06 16:20
memberVoldo8012-Feb-06 16:20 
GeneralWeb control Pin
dado200330-Jan-06 5:50
memberdado200330-Jan-06 5:50 
GeneralRe: Web control Pin
Shiby31-Jan-06 6:22
memberShiby31-Jan-06 6:22 
Questionbad picture Pin
pesokes29-Jan-06 10:04
memberpesokes29-Jan-06 10:04 
AnswerRe: bad picture Pin
Shiby29-Jan-06 18:50
memberShiby29-Jan-06 18:50 
GeneralRe: bad picture Pin
anil_mane31-Jan-06 2:08
memberanil_mane31-Jan-06 2:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190214.1 | Last Updated 29 Jan 2006
Article Copyright 2006 by Shiby
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid