Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Finally a Horizontal Scroll Bar List Box in ASP.NET!

2.84/5 (18 votes)
9 Sep 20051 min read 1   2.8K  
Implementing a horizontal scroll bar ListBox in ASP.NET.

List Box with Horizontal Scroll Bar

Introduction

Have you ever imagined putting a horizontal scroll bar in a list box? As we are living in a high speed internet world, everybody wants their web application to look exactly similar to Windows applications and this article will explain how easily we can create a horizontal scroll bar using ASP.NET.

Problem

See the image given below. You have a list box which is supposed to hold a long text and the width won't fit into the listbox's width.

List Box with Horizontal Scroll Bar

Have you ever thought about changing a small property to change the style to show a horizontal scroll bar?

There is nothing like that available in ASP.NET.

Easy Way

We can put this list box inside a DIV and set the style for DIV to overflow which will automatically show the scroll bar whenever necessary.

Your aspx page has the following DIV:

HTML
<div id='hello' style="Z-INDEX: 102; LEFT: 13px; OVERFLOW: 
            auto; WIDTH: 247px; POSITION: absolute; TOP: 62px; HEIGHT: 134px" >

Important style you need to note is:

HTML
OVERFLOW: auto

inside the style element.

Now you can put your asp:listbox inside the DIV definition. Inside your code behind class' page_load function, you need to define the width and height of the list box properly, so that it won't overflow with the DIV.

Server side code looks as given below:

C#
private void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {
        //Load all items in the list box.
        int nItem = Convert.ToInt32(ListBox1.Items.Count * 17);
        ListBox1.Height = nItem; //Set height depends on the font size.
        ListBox1.Width = 800; //This will ensure the list item won't be shrinked!
    }
}

Points of Interest

Nobody likes this way of implementing this. But as long as this meets the business requirements, everybody will be happy.

History

  • August.22.2005 - version 1.0.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here