[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9914
  • Last Modified:

How to add a horizontal scrollbar to a select list?

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
siyu
Asked:
siyu
  • 2
  • 2
  • 2
  • +1
1 Solution
 
venkateshwarrCommented:
No you canno do that.
0
 
venkateshwarrCommented:
If you want to do something like that... you have to use DHTML and create a user defined menu like structure..
0
 
siyuAuthor Commented:
Hi Venkateshwarr,
Can you give me an example or some online links about how to do it by using DHTML?
Thanks!
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
seanpowellCommented:
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
 
rockmansatticCommented:
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
 
seanpowellCommented:
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
 
siyuAuthor Commented:
Thank you, it works.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now