Add horizontal scroll to asp.net listbox control

Question

How can I add horizontal scroll capabilities to the asp.net listbox control?

Answer 1

If you really, really need it, one idea would be to create a custom ListBox class whose HTML looks like this: sets the width of the SELECT to that of your widest value's width (the max width of the scrollbar, for example). Now wrap that SELECT inside of a DIV of the 'constrained' size and let it scroll on overflow.

Here's a quick example starting down those lines, here's the type of HTML you want spit out by a control:

<div style="width:200px; height:100px; overflow:auto;">
<SELECT size="4">
<OPTION
Value="1">blahblahblahblahblahblahblahblahblahblah blahblah</OPTION>
<OPTION Value="2">2</OPTION>
<OPTION Value="3">3</OPTION>
<OPTION Value="4">4</OPTION>
</SELECT>
</div>

so in essence I'd recommend creating a composite custom control for this, which renders this HTML. They're pretty easy to make, Google on the terms 'composite control asp.net'.

The toughest part will be matching up the div dimensions to that of the select box, to make the scrollbars work/line up properly. That's why it's kinda tricky.

Source

Also, take a look at this: Automatically Adding/Hide Horizontal Scroll bar in the ListBox control

EDIT: Make sure you have enough height to include the scroll bar height or else you'll get the vertical scroll bar on both controls.

Answer 2

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

Put your asp:listbox inside the DIV definition. In 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.

private void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {

        int nItem = Convert.ToInt32(ListBox1.Items.Count * 17);
        ListBox1.Height = nItem; 

        ListBox1.Width = 800; 

    }
}

Code and solution available at http://www.codeproject.com/KB/custom-controls/HorizontalListBox.aspx

Answer 3

The problem is that I will end up with 2 vertical scroll bars, one from the div and one from the listbox control.

Answer 4

Maybe this will help you out

http://www.codeproject.com/KB/custom-controls/ScrollableListBoxASP20.aspx

Answer 5

Thanks Codeslayer, that's what I was looking for.

Answer 6

thanks Espo, the keyword was that overflow in a div. I've heard about it before, I just could not remember that attribute overflow. I used it for my datalist. I hope you can give more simple answers like this in the near future, this is my first year writing programs in asp.