Any one Knows this

suhas2852 · suhas2852

Hello,

Any expert here knows how can i add horizontal scrollbar to my listbox ,
including the traditional vertical scroll.

The scrollbar should be displayed only if the data exceeds the width of the
listbox and not otherwise. (i.e if the listbox is large enough to hold data
then the scrollbars neednot be enabled. If data exceeds the width then the
horizontal scrollbar should be enabled. and data should be scrollable as it
was in TEXTAREA.

bubblocity · bubblocity

I don't know how to put a horizontal scrollbar, but you can use an IFrame to
fake this, give the following a try:

2 files
- main.html
- testframe2.html



<html>
<script>
function getSelectIndex(value, select){
var loops = select.options.length;
for(i=0; i<loops; i++){
if(select.options[i].value==value){
return i;
}
}
return 0;
}

function addEntry(val, text){
var objSelectitemcount;
var found;

objSelect = document.myform.Select2;
objSelectitemcount = objSelect.options.length;

//loop through and make sure entry does not already exist
found = false;
for(i=0;i<objSelectitemcount;i++){
if((objSelect.options[i].text == text)&&(objSelect.options[i].value==val)){
found=true;
break;
}
}
if(!found){
objSelect.options[objSelectitemcount++]=new Option(text, val);
}

selectAll(objSelect);
}
function removeEntry(){
var obj;
objSelect = document.myform.Select2;
objSelectitemcount = objSelect.options.length;

var z=0;
for(i=0;i<objSelectitemcount;i++){
if(objSelect.options[z].selected == true){
objSelect.options[z] = null;
//z doesn't change since the one below shifted up.
}else{
z++;
}
}

selectAll(objSelect);
}
function selectAll(objSelect){
for(j=0;j<objSelect.options.length;j++){
objSelect.options[j].selected = true;
}

}
</script>
<body>
<form name="myform">
Test

<table>
<tr>
<td>
<iframe src="testframe2b.html" width="200" height="150">
</iframe>




</td>
<td>

<select name="Select2" multiple size="8" style="width:200px;height:160px;">
</select>
</td>
<td>
<input type="button" onClick="removeEntry()" value="Delete Selected">
</td>
</tr>
</table>

</form>

</body>
</html>


<html>
<head>
<script language="JavaScript">
function sendData(val, text){
window.parent.addEntry(val, text);
}
</script>
<style type="text/css">

table{
font-family: Arial,Helvetica;
font-size: 12px;
line-height:2.0;
}
a{
text-decoration:none;
}
a:hover{
background-color:#eeeeee;

}
</style>

</head>
<body >
<form>
<table width="600">
<tr>
<td nowrap>
<a href="javascript:sendData(1, '1 - The Really Longggggggggggggg Number
1');">1 - The Really Longggggggggggggg Number 1</a><br>
<a href="javascript:sendData(2, '2 - The Really Longggggggggggggg Number
2');">2 - The Really Longggggggggggggg Number 2</a><br>
<a href="javascript:sendData(3, '3 - The Really Longggggggggggggg Number
3');">3 - The Really Longggggggggggggg Number 3</a><br>
<input type="hidden" name="myvalue">
<br>
</td>
</tr>
</table>
</form>

</body>
</html>

rob::digitalburn · rob::digitalburn

Just use a <div> with a fixed width for your list box, or put your list box
inside one. Then set the CSS style or class of the <div> to "overflow:auto".

Of course, if you data has line breaking points, you'll find that it breaks
over lines instead of forming horizontal scrollbars. Just putit inside a
<pre> tag if that happens, with the lines breaks where you want them and
only where you want them.

So your code looks like:

<div id='listbox' style='width:250px; overflow:auto'>
<----- or whatever width you want
<pre>
your content
</pre>
<div>

I think the solution with the iframes was a little too complicated ;) Even
if you wanted to use iframes you could do it much more simply than that.

Anyway, hope that helps!

Rob

suhas2852 wrote:

> Hello,
>
> Any expert here knows how can i add horizontal scrollbar to my
> listbox , including the traditional vertical scroll.
>
> The scrollbar should be displayed only if the data exceeds the
> width of the listbox and not otherwise. (i.e if the listbox is large
> enough to hold data then the scrollbars neednot be enabled. If data
> exceeds the width then the horizontal scrollbar should be enabled.
> and data should be scrollable as it was in TEXTAREA.

bubblocity · bubblocity

Oh, I like rob's solution much much better!

:D

Any one Knows this

Thread Tools

Display

Any one Knows this

Re: Any one Knows this

Re: Any one Knows this

Re: Any one Knows this

Posting Permissions