Solved

Horizontal Scroll bar for a ListBox

Posted on 2004-04-20
27
40,885 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Powershell output to HTML 1 30
while loop in html mail format 5 34
Login area of a page 4 20
Bootstrap 3 icons 3 15
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now