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

• Download demo project - 6.38 Kb
• Download source - 1.63 Kb

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.

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:

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

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:

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.