Solved

Horizontal Scroll bar for a ListBox

Posted on 2004-04-20
27
40,912 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
[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
  • 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
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 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

726 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