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
Solved

Horizontal Scroll bar for a ListBox

Posted on 2004-04-20
27
40,897 Views
Last Modified: 2011-08-18
HI Experts,

I need to add a Horizontal Scrollbar for a List box in the JSP page which I have. I am using the <select> tag for creating a listbox. Could anyone of U please help me out in getting a horizontal scroll bar for this list box?

Irfyy
0
Comment
Question by:Irfyy
  • 9
  • 9
  • 5
  • +3
27 Comments
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10868419
Hi,

Since scrollbars (horiz & vert) are added automatically if the option's text is larger than the select's size, I don't understand the need for the question.

Vinny
0
 
LVL 12

Expert Comment

by:venkateshwarr
ID: 10868461
no cannot do that..
0
 

Author Comment

by:Irfyy
ID: 10868570
No... the vertical scroll bar gets added automatically.. the horiz does not... Any idea how to achieve this? Plss help!
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 17

Expert Comment

by:dorward
ID: 10868647
Short of creating a fake listbox using JavaScript, I don't believe this is possible. I suggest either using shorter labels, or switching to radio buttons or checkboxes instead.
0
 

Author Comment

by:Irfyy
ID: 10868685
Ok, can I get any help on giving a Tool Tip for the selected text from the list box?
0
 
LVL 17

Expert Comment

by:dorward
ID: 10868701
<option title="foo">fo</option>

Browser support is variable. I suspect Internet Explorer doesn't support it
0
 

Author Comment

by:Irfyy
ID: 10868722
yes... It does not...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10868729
This may help also - I have customized a dhtml select box to generate a horizontal scrollbar:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20959453.html

This is the script:
http://webfx.eae.net/dhtml/select/jsGenerated.html

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 17

Expert Comment

by:dorward
ID: 10868792
The demo page breaks badly in Safari. (It is entirely unusable).
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10868803
Is that because of the code or Safari?
0
 

Author Comment

by:Irfyy
ID: 10868835
I already used this... see my code here.... But still it doest show the horiz scroll...

<select name='<%=CCConstants.ENTITY_ID%>' style="width:199px; overflow:auto;" class="select" multiple onchange="popFunctions(); populateEmail(1)" <%=modeDisable%> size=<%=objlEntityVOs.size()>4?4:objlEntityVOs.size()%>>
0
 
LVL 17

Expert Comment

by:dorward
ID: 10868837
The combination of both I would assume.

I haven't examined the code for the script so I couldn't say what is causing it.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10868910
Possibly... The code is based on standard DOM methods - so I would lean toward it being a problem with Safari, but I can't test that.
0
 
LVL 17

Expert Comment

by:dorward
ID: 10868936
I think it is a CSS rendering problem rather then a JS problem, but it does make it unusuable and Safari is a very popular browser among Mac users (and the other KHTML based browser, Konqueror, is pretty popular on Linux).
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10869003
Hi,

Sorry about my original post (haven't had my quota of espresso yet).  I was thinking of iframes when I answered.  

Any rate,  dependent upon your actual situation, you might consider something like this (where a 'pseudo-select' is inserted within an iframe):


The main html page:

<table border="1">
<tr><td>dkdkkd</td><td>
<iframe style='width:50px' name='theFrame' src="iframeSelopts.html">
</iframe>
</td></tr>
</table>

the iframeSelOpts.html file:

<script type="text/javascript" >
function doit()
{
  alert(event.srcElement.id)
}

function hilite()
{

  divID = event.srcElement.id;
  if (divID.indexOf('opt') != -1)

  document.getElementById(divID).style.backgroundColor =  (event.type == 'mouseover') ? 'blue' : "white";

}

document.onclick = doit;
document.onmouseover = hilite;
document.onmouseout = hilite;
</script>
</head>
<body>
<div id="opt1">This is option 1</div>
<div id="opt2">This is option 1</div>
<div id="opt3">This is option 1</div>
<div id="opt4">This is option 1</div>
<div id="opt5">This is option 1</div>
<div id="opt6">This is option 1</div>

</body>
</html>

Vinny
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10869103
Yeah...  Moz shows some errors in the js that IE is okay with.

FWIW, IE only then it is :-(
http://www.pdgmedia.com/ee/custom.html

I'll work on the js with the author and see if we can't get it fixed....
0
 

Author Comment

by:Irfyy
ID: 10869199
Explain?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10869299
Sorry - I went off track a bit there.
The link above is a dhtml custom select box that has been modified to accept horizontal scrollbars - but it's not fully supported yet in all major browsers...
0
 

Author Comment

by:Irfyy
ID: 10869338
Oh... Yeah I went into that link... But my qn was related to a Listbox... and not a combo box...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10869419
Okay - first off, it's called a Select, not Combobox - which is a different thing entirely :-)

What you're looking for is still a select, with the attribute set differently:
http://www.pdgmedia.com/ee/custom_list.html
0
 

Author Comment

by:Irfyy
ID: 10869436
Exactly... This is what I want... Tell me how did U get it?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10869466
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20960348.html#10868729

And change the code to this, for example:

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

Author Comment

by:Irfyy
ID: 10869546
Can I achieve the same using a select tag (<select>) ?

And should I create a new classic.css for this? I dont find it in my pc....
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 175 total points
ID: 10869610
>>Can I achieve the same using a select tag (<select>) ?
That is a select tag, but it's a custom one created by javascript files. It's not a standard OS control, and it is likely only for Internet Explorer at this point.

>>And should I create a new classic.css for this? I dont find it in my pc....
I'm concerned this may a little too complex at the moment, perhaps we need to step back a bit.

Go to this link, read the page and download the files. The CSS above just replaces what the original author used.
http://webfx.eae.net/dhtml/select/jsGenerated.html

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10869940
So you're okay with this now? Just want to make sure...
0
 

Author Comment

by:Irfyy
ID: 10875101
Yep. I got the solution for my qn... and hence accepted :-)
0
 

Expert Comment

by:aturaga
ID: 12545573
So it is not possible to have a select tag in html to do horizontal scrolling. Has anyone tried to take the code Sean provided and convert it into a css that can be assigned to the <select> tag.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why a span is lower 2 26
Asp in script 6 39
removing a class in javascript 4 50
Search Item in Table 2 22
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

829 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