Scrolling an ASP.NET ListBox to right where you want it to be

Yesterday the question was posted to the Arizona Groups list:

How do you have the selected values in an ASP.Net Listbox control scroll into view?

Simple answer: By default in IE whatever is selected does get scrolled to the top. In ASP.NET, the ListBox is rendered as a <SELECT> element with a SIZE attribute. For whatever item is selected, as appropriate the selected attribute gets applied. Here's an example to set the stage, both the HTML generated by ASP.NET and the actual control:

<select name="listBox1" size="3" id="listBox1">
 <option value="Red">Red</option>
 <option value="Green">Green</option>
 <option value="Blue">Blue</option>
 <option selected="selected" value="Yellow">Yellow</option>
 <option value="Cyan">Cyan</option>
 <option value="Magenta">Magenta</option>
</select>

So we see that by just setting the SelectedIndex property in ASP.NET then when it's presented in IE that member is scrolled into view and placed all the way at the top. Haven't tested it with other browsers, but I would bet in Mozilla and Safari it's similar behavior.

So now here's a button that uses Javascript to select and scroll the above ListBox to the “Green“ entry in the list:

In the onclick attribute it simply says "listBox1.selectedIndex=1;". Very easy.

Incidentally, with IE6 there is a scrollTop property which looks like it should set the amount a <SELECT> gets scrolled. But I don't know why it was even included because when referenced it always returns 0, and doesn't do anything when it's set. So perhaps in future versions of IE we'll be able to precisely set where things are scrolled using scrollTop in conjunction with selectedIndex, scrollHeight, and length.

Share This Post:

Feedback

# re: Scrolling an ASP.NET ListBox to right where you want it to be

I am trying to do the same thing you describe here, but it doesn't work for me. I am using asp.net 2.0 and have a listbox that the user wants to be able to search by typing text into a text box. For example, if we have the following items in a listbox:

1
2
3
4
5
6
7
8
9
10

and we only display 3 items, if the user types 9, they want to see 9 show up in the listbox without having to scroll to see it. I am using internet explorer 6 or higher and it doesn't work.

Any ideas would be appreciated.

Thanks,
Don 12/6/2006 7:05 AM | Don

# re: Scrolling an ASP.NET ListBox to right where you want it to be

Even though IE6 scrollTop doesn't work on select elements, you can still use a different scrollTop feature of IE6 to scroll to a specific position in a list box. You have to set the select element's SIZE equal to its OPTIONS.LENGTH first though, so that you lose the automatic scrollbars. Then you have to wrap the whole thing inside a DIV, set the DIV's height, and set its OVERFLOW to AUTO. Now you have DIV scrollbars, which do not always return zero and can be set in JavaScript.

Check out the following URL for more info:
http://www.codeproject.com/useritems/ListBoxComponent01.asp 6/18/2007 1:43 PM | danludwig

# re: Scrolling an ASP.NET ListBox to right where you want it to be

Only one comment:
This works fine if the list box is used to select only item of the list. If the mutliple attribute is set to mutliple( multiple = "multiple") then the code dosn't work as expected and that defeats the purpose of having a list box. If I wanted a list box that allow me select a single item , I would use the dropdown box. I am looking for code that visibly displays the first selecteditem from multiselect options. 8/28/2007 5:01 AM | BC

# re: Scrolling an ASP.NET ListBox to right where you want it to be

God bless you! I'm desparately trying to get our clients over to IE 7 (or, you know, not IE at all) but they still for the most part use IE 6... And my god, I needed to set scrollTop on a select element or the whole page wasn't going to work. You saved my day. I owe you a beer. 9/19/2007 2:07 PM | Stephen Weiss

# re: Scrolling an ASP.NET ListBox to right where you want it to be

It's hard to get excited about low-quality answers to questions, but this has got to be one of the worst I have ever seen.
Question: How do I mmake this happen?
Answer: You dont do anything, it does it by itself.
If it really did it by itself, why would I ask the question? I should give this guy some credit, at least he read the question, which is more then some do when posting. 9/20/2007 4:03 AM | Shocked

# re: Scrolling an ASP.NET ListBox to right where you want it to be

nice idea, but it's given me so much grief with Opera I've given it. 8/12/2008 1:03 AM | zorb

# re: Scrolling an ASP.NET ListBox to right where you want it to be

the listbox control that I used in my application works perfectly with IE6 and lower versions and on FireFox too. But it does not work on IE7. I am not able to scroll through the list box nor select from it. Any ideas? 9/17/2008 2:51 AM | vid

# re: Scrolling an ASP.NET ListBox to right where you want it to be

Hi all,

In IE6, before ADD/Modify/Delete operations for any option element, U need to remove the multiple attribute and do the operation and then set multiple attribute. This will maintain select's scroll position

Prosanta Kundu 8/5/2009 7:01 AM | Prosanta Kundu

# re: Scrolling an ASP.NET ListBox to right where you want it to be

2 projects in 1 solution had the same assembly name 11/6/2009 8:50 PM | DDos Protection

# re: Scrolling an ASP.NET ListBox to right where you want it to be

thanks,dear! It is very useful, I have done it well. 6/3/2010 9:19 AM | aaa replica bag

Lorin Thwaits

A geek says what?