Click here to Skip to main content
Click here to Skip to main content

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

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 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)
    {
        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 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)
    {
        lstCollegeNames.focus();
        lstCollegeNames.size=8;
    }
}

That's it.

Points of Interest

Impossible is just another hurdle on the track.

History

Initial version of the article - 29 Jan 2006.

License

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

Share

About the Author

Shiby
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

Comments and Discussions

 
GeneralScrollable select drop down list with tool tip PinmemberNagendraMN14-Sep-09 20:49 
GeneralVertical scrollbar PinmemberNupur080620-Jan-09 5:24 
GeneralAdvanced ListBox Component Pinmemberdanludwig21-Jun-07 4:35 
GeneralYour Drop Down List/List Box Tool Pinmemberhowardjr4-Oct-06 6:42 
NewsScrollableListBox PinmemberEvyatar Ben-Shitrit15-Jun-06 8:59 
QuestionRe: ScrollableListBox Pinmembersmithasathyam12-Nov-06 20:01 
AnswerRe: ScrollableListBox Pinmembersmithasathyam12-Nov-06 20:04 
GeneralAnother Issue PinmemberTboner24-Feb-06 9:55 
QuestionRe: Another Issue Pinmemberjobaz5418-Jun-08 23:16 
GeneralTweaked functions PinmemberPMDL17-Feb-06 9:05 
AnswerRe: Tweaked functions PinmemberShiby20-Feb-06 21:41 
GeneralAlmost... PinmemberTboner14-Feb-06 5:32 
GeneralRe: Almost... PinmemberPMDL17-Feb-06 9:12 
GeneralRe: Almost... PinmemberPMDL17-Feb-06 9:41 
GeneralRe: Almost... [modified] Pinmemberzivros1-Jan-07 23:24 
GeneralRe: Almost... Pinmemberdanludwig11-Jun-07 6:14 
GeneralCool PinmemberVoldo8012-Feb-06 15:20 
GeneralWeb control Pinmemberdado200330-Jan-06 4:50 
GeneralRe: Web control PinmemberShiby31-Jan-06 5:22 
Questionbad picture Pinmemberpesokes29-Jan-06 9:04 
AnswerRe: bad picture PinmemberShiby29-Jan-06 17:50 
GeneralRe: bad picture Pinmemberanil_mane31-Jan-06 1:08 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 29 Jan 2006
Article Copyright 2006 by Shiby
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid