Horizontal Scrollbar for ASP Listbox or HTML selectbox

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.