?
Solved

Horizontal Scroll bar for a ListBox

Posted on 2004-04-20
27
Medium Priority
?
40,920 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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
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 700 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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

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…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

777 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