Solved

How to add a horizontal scrollbar to a select list?

Posted on 2004-04-19
7
9,874 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
USE HTML to redirect a webpage to a local Xcel file. 2 40
wordpress url rewriting plugin 5 46
Synchronizing CSS load 3 29
Wrapper for APPs 9 36
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.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

896 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now