Drop down

[rashni]

Hi,

I have a select list (drop down list) it has very long names like...
ababababababbabbabbababababbabbabbabaabbbaabbababba
so by using style="width:100px" I have cut the size like this-
<select name="cars" style="width:100px"
But when user tries to access ths list I want the user to be able to
read the whole name.
So when user clicks on this select list I want to replace it with the
actual size.
I know this can be done using javascript.
but as Im new to Javascript Im not able to figure out the solution.
Please I need some help as I need to submit my project tomorrow.

Can someone give me an idea?

Thanks in advance,
Rashni

 

[rashni]

I think the following code does something similar but Im not able to
understand anything as Im very new to this.
Basically I think the
function select_class is invoked when the user click
on a list (specified by ondblclick).

<script type="text/javascript">
function select_class(myform,myvar)
{
opt=myvar.options[myvar.selectedIndex].value;
txt=opt;
document.all.classt.value=txt;
document.all.entityt.value="0";
myform.submit();
}
</script>

<td><select name="classl" id="classl" size="9"
style="width:250px"
ondblclick="select_class(this.form,document.all.classl)">
<!FOREACH ics ic>
<option value ="<!REPLACE ic.getClassName()>">
<!REPLACE ic.getClassName()>
<!/FOREACH>
</select></td>

If someone could give me an idea I would really appreciate it.

Thanks,
rashni

 

[RobG]

Hi,

I have a select list (drop down list) it has very long names like...
ababababababbabbabbababababbabbabbabaabbbaabbababba
so by using style="width:100px" I have cut the size like this-
<select name="cars" style="width:100px"

Better to use 'em' that pixels. Set the width of the select so that it
fits the longest option text (trial and error is probably the best
method). Then if the user has a different default text size, it will
still fit, and no JavaScript at all is required.

But when user tries to access ths list I want the user to be able to
read the whole name.
So when user clicks on this select list I want to replace it with the
actual size.
I know this can be done using javascript.
but as Im new to Javascript Im not able to figure out the solution.

That would be a rather awful piece of work - the select would change
width as different options were selected.

Please I need some help as I need to submit my project tomorrow.

Tomorrow? Where?

Can someone give me an idea?

Since its just a school project, and likely of zero practical value, try
looping through all the options and counting how many characters each
has to find the longest. Multiply the longest length by some factor
(0.75? trial and error will let you know) and set the width in em.

But I would never do that in a production system.

 

[rashni]

Hi Rob,

Thanks a lot for your help. I was able to create horizontal scroll bar
for my select list like this:

<!--<div align="center" id="comboContainer"
style="overflow:hidden;width:100px">-->

<div align="center" id="comboContainer"
style="overflow:scroll;width:200px">
<select size=5>
<option>a</option>
<option>This is a very long line that creates scroll
bar......</option>
<option>ahjjdfhasjhdfjkhaskjhfkhasdjkfh</option>
<option>afasd´kfléi9rui0jñasdfj</option>
<option>aasd asd</option>
<option>aasdasdasdsadasd</option>

</select>
</div>


Though this is not a very professional way of doing it, but its simple
and I got horizontal scroll bar!!

Thanks,
Rashni