Solved

How to add a horizontal scrollbar to a select list?

Posted on 2004-04-19
7
9,877 Views
Last Modified: 2012-06-21
I dynamaically generate a dropdown list with fixed width, some records are long, I need a horizontal scrollbar to to view whole records. I use IE. How can I do this?
Please help.
0
Comment
Question by:siyu
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 12

Expert Comment

by:venkateshwarr
ID: 10862449
No you canno do that.
0
 
LVL 12

Expert Comment

by:venkateshwarr
ID: 10862455
If you want to do something like that... you have to use DHTML and create a user defined menu like structure..
0
 
LVL 1

Author Comment

by:siyu
ID: 10862519
Hi Venkateshwarr,
Can you give me an example or some online links about how to do it by using DHTML?
Thanks!
0
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
LVL 31

Expert Comment

by:seanpowell
ID: 10862810
No points for me, as I haven't had a chance to see how cusomtizable this guy's code is...

This is one example of a dhtml select box:
http://webfx.eae.net/dhtml/select/jsGenerated.html
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 10862989
Dont think putting a scroll bar on a dropdown is possible.  

Better to design without fixed width, allow for longer entries, and validate new records to allow a maximum number of chars.

OR

Dive deep into new territory, your new code may help future coders.

0
 
LVL 31

Accepted Solution

by:
seanpowell earned 100 total points
ID: 10868427
Just a follow up here. I downloaded the custom dhtml box linked above. You can generate a horizontal scrollbar by changing the following:

In classic.css:

.dropDown
      {
      position: absolute;
      visibility: hidden;
      width: 100%;
      border: 1 solid windowtext;
      padding: 0;
      background: window;
      color: windowtext;
      }

becomes:

.dropDown
      {
      position: absolute;
      visibility: hidden;
      width: 100%;
      /* creates the scrollbar */
      overflow:auto;
      /* prevents the line from wrapping*/
      white-space:nowrap;
      border: 1 solid windowtext;
      padding: 0;
      background: window;
      color: windowtext;
      }

An example of the html would be:

<script type="text/javascript">
<!--

var optionArray = new Array();
optionArray[0] = new Option("Item 1", "value 1");
optionArray[1] = new Option("This is a long item and will generate a scrollbar", "value 2");
optionArray[2] = new Option("Item 3", "value 3");
optionArray[3] = new Option("Item 4", "value 4");
optionArray[4] = new Option("Item 5", "value 5");

writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");

//-->
</script>
0
 
LVL 1

Author Comment

by:siyu
ID: 10888798
Thank you, it works.
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question