Horizontal Scrollbar for ASP Listbox or HTML selectbox


Problem Statement:

A normal listbox or ASP Listbox for that matter has an issue with the scroll. They have vertical scroll by default with them. However when it comes to horizontal scroll, they choke. Even if we specify a width for the listbox and give a lengthy option in the listbox content, you cant expect it to give scroll to you automatically.

Solution Approach:

The best solution approach is to wrap the listbox in a div. The div will give the horizontal scroll, while the listbox will have its own vertical one.

Let us take a simple ASP .Net ListBox control. You can do the same with even a selectbox with select=”multiple”.

<asp:ListBox ID=”lstGroupMembers” runat=”server” SelectionMode=”Multiple” style=”width:390px;height:250px;”></asp:ListBox>

You can see how the listbox gets rendered(above). Let’s assume that one of the options in the listbox was lengthy and goes beyond this width limit. Let’s see how it gets rendered.
The original text in the above listbox is “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem justo, pulvinar nec viverra”, however you are able to see only the bold section. The remaining text got trimmed.
Now lets see how it gets rendered after implementing the fix.
You will be able to see the full text here since we have a horizontal scrollbar coming into picture.
Solution:
Step 1 : Wrap the listbox with a div just like the one below. Ensure that the width of the div is the same as the width of the listbox and height is [listbox height + scrollbar height (7px-8px) = 257px (here)]. The overflow is for the x axis only, since we don’t want to see the vertical scrolls. Just in case you see some vertical scroll, ensure that you increase the div height to a suitable value. This might happen because of some padding or margin of your listbox.

<div id=’groupMembers’ style=”overflow-x: auto;width:390px;height:257px;” >

<asp:ListBox ID=”lstGroupMembers” runat=”server” SelectionMode=”Multiple”></asp:ListBox>
</div>
Step 2 : Now write the javascript that does the creation of scrolling for your listbox
function changeListboxStyles(flag) {
//If flag is true, then the scroll effect happens.
//If flag is false, then the scroll effect goes and everything is reset back to normal.
if (flag) {
if ($(“#ctl00_cphMain_lstGroupMembers > option”).size() != 0) {
//Setting the width to auto to give the scroll effect, when the text goes beyond the width of the listbox.
$(“#ctl00_cphMain_lstGroupMembers”).get(0).style.width = ‘auto’;

//Setting the height to be reduced a little to take care of the scrollbar of the div coming into picture
$(“#ctl00_cphMain_lstGroupMembers”).get(0).style.height = ‘240px’;

$(“#groupMembers”).get(0).style.border = ‘1px solid #9f9f9f’;
$(“#groupMembers”).get(0).style.borderTop = ‘none’;
}
}
else {
if ($(“#ctl00_cphMain_lstGroupMembers > option”).size() == 0) {
//Resetting the width settings of the listbox back to the original value.
$(“#ctl00_cphMain_lstGroupMembers”).get(0).style.width = ‘390px’;
$(“#ctl00_cphMain_lstGroupMembers”).get(0).style.height = ‘250px’;

$(“#groupMembers”).get(0).style.overflow = ‘hidden’;
$(“#groupMembers”).get(0).style.border = ‘none’;
}
}
}
The main reason why you need this javascript into picture is due to the fact that you are fixing the width of your listbox(in 99% percent of cases). And the scroll will work only if you dynamically increase the width of the listbox based on the contents or set the width of the listbox to auto. The javascript above does the same.
If i want this scroll functionality to be implemented in the page load, i call the javascript function as changeListboxStyles(true); I just check if there are any contents in that listbox. You can go ahead and customize this to any level. Lets say you can play around with the borders and styles. Just ensure the one in the bold (in the javascript) are taken care.
I have used jquery in the above code. You can use javascript appropriate. I am not writing that here.
Step 3 : Call the function  changeListboxStyles(true); when you want to view scroll. Call the function changeListboxStyles(false); when you are done with your job and revert back to normal, especially when you don’t have any options inside the listbox.
Hope this solution helps. Do post your queries, if any.

2 thoughts on “Horizontal Scrollbar for ASP Listbox or HTML selectbox

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s