Horizontal Scroll bar for a ListBox

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
IrfyyAsked:
Who is Participating?
 
seanpowellConnect With a Mentor Commented:
>>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
 
VincentPugliaCommented:
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
 
venkateshwarrCommented:
no cannot do that..
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
IrfyyAuthor Commented:
No... the vertical scroll bar gets added automatically.. the horiz does not... Any idea how to achieve this? Plss help!
0
 
dorwardCommented:
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
 
IrfyyAuthor Commented:
Ok, can I get any help on giving a Tool Tip for the selected text from the list box?
0
 
dorwardCommented:
<option title="foo">fo</option>

Browser support is variable. I suspect Internet Explorer doesn't support it
0
 
IrfyyAuthor Commented:
yes... It does not...
0
 
seanpowellCommented:
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
 
dorwardCommented:
The demo page breaks badly in Safari. (It is entirely unusable).
0
 
seanpowellCommented:
Is that because of the code or Safari?
0
 
IrfyyAuthor Commented:
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
 
dorwardCommented:
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
 
seanpowellCommented:
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
 
dorwardCommented:
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
 
VincentPugliaCommented:
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
 
seanpowellCommented:
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
 
IrfyyAuthor Commented:
Explain?
0
 
seanpowellCommented:
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
 
IrfyyAuthor Commented:
Oh... Yeah I went into that link... But my qn was related to a Listbox... and not a combo box...
0
 
seanpowellCommented:
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
 
IrfyyAuthor Commented:
Exactly... This is what I want... Tell me how did U get it?
0
 
seanpowellCommented:
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
 
IrfyyAuthor Commented:
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
 
seanpowellCommented:
So you're okay with this now? Just want to make sure...
0
 
IrfyyAuthor Commented:
Yep. I got the solution for my qn... and hence accepted :-)
0
 
aturagaCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.