codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:
Search Forums:
  horizontal scroll bar for drop down list box  Kris123 at 15:11 on Friday, September 12, 2003
 

Iam trying to get horizontal scroll bar for drop down box using HTML,css and javaScript, when value in drop down is toolarge.
If any body know the solution, it will be greate help to me.

Thanks a lot.

  Re: horizontal scroll bar for drop down list box  Troy Wolf at 16:33 on Friday, September 12, 2003
 

I assume by "drop down" you are referring to the HTML <SELECT> element. By default a <SELECT> element will horizontally (left to right) size to fit your contents. The vertical size is normally controlled using the "size" parameter. For example, to show 5 options at a time, <select name=MyOptions size=5>. The vertical scroll bar is automatic. There is not an option for a horizontal scroll bar in a SELECT.

So you must be forcing the width of the <SELECT> to be less than your contents. If so, your options will be cutoff -- no option for horizontal scrolling.

The "solution" would be to roll your own method for allowing the user to select the option(s). One idea is to use a popup window where you code your own scrollable list of options as a stand-alone HTML page. When the user selects an option, you pass back that value to the parent window. This is much more involved than simply using a <SELECT> of course, but if you want to do non-default things, you'll have to code for it.

Hope this helps, Kris.
Troy Wolf: site expert
SnippetEdit Website Editor


  Re: horizontal scroll bar for drop down list box  Kris123 at 18:40 on Friday, September 12, 2003
 

Thank you..Troy Wolf

Can I create horizontal scroll bar using javaScript for html <select> element?
I appreciate you help if you have any example code or just an idea.
Iam a java programmer and i know little about javaScipt.

Thanks a lot.

  Re: horizontal scroll bar for drop down list box  Troy Wolf at 18:55 on Friday, September 12, 2003
 

You cannot add a horizontal scroll bar to an HTML <SELECT> element. This is why I said your options are to "roll your own".

The two methods you'll want to look at are.
1) Write a stand-alone HTML page (of course could be generated server-side by ASP,PHP,CGI,JSP,CF, etc.). This page will be the scrollable list of options. Then have your page where you need the user to select an option pop a smaller window with this page in it. Script it so that when the user selects an option from the popup, that value is passed back to the parent page and the popup window is automatically closed.

2) DHTML menus. There are ways to generate objects that appear similar to a <SELECT> using scrollable <DIV>s and styles to make them appear and dissappear as needed. These can be very cool, but making them 100% cross-browser is a challenge for the best javascripters out there. There are examples out there you can leverage.
Troy Wolf: site expert
SnippetEdit Website Editor


  Re: horizontal scroll bar for drop down list box  Kris123 at 20:41 on Friday, September 12, 2003
 

Thank you for your time..I will going to try now.



  Re: horizontal scroll bar for drop down list box  rehan78 at 11:06 on Monday, October 27, 2003
 

hello

  Re: horizontal scroll bar for drop down list box  Kris123 at 12:36 on Thursday, November 13, 2003
 

Thanks lot for work around.

  Re: horizontal scroll bar for drop down list box  nagarjuna at 12:12 on Monday, January 08, 2007
 

hi,
can u tell me how to add scroll bar for the listbox using javascript,css,html.

Can plz share the code

  Re: horizontal scroll bar for drop down list box  Txtlocal at 10:13 on Tuesday, July 17, 2007
 

Hello,

I have joined this site purely to add this comment (as this is the no.1 Google result for this issue and it has remained unanswered since 2003!!)

Simply add the following DIV tag around the SELECT box and you will get a scroller:

<div style="overflow-x:scroll; width:500px;
overflow: -moz-scrollbars-horizontal;">
<select....></select>
</div>

Thanks,

Alastair
http://www.Txtlocal.com


  Re: horizontal scroll bar for drop down list box  acbose at 17:45 on Monday, March 31, 2008
 

excellent








CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
//








Recent Forum Threads
• ** Site Hacked ** javascript inserted...
• Losing background/text color when converting HTML to PDF
• hidden div block when displayed, displays at an offset of 200px only in IE 6..
• help - sketch
• Re: Perl Script - File Handling.
• Open a file from website
• Re: to open 5 terminals from one and also execute different commands on each terminal
• read a selected multiple line, those should match some of the values read in the files..
• Help me please


Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text


© Copyright codetoad.com 2001-2008