Solved

How to add a horizontal scrollbar to a select list?

Posted on 2004-04-19
7
9,888 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 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