[html form]Dropdown box lenght problem

[Ken Shamrock]

for this tag like
<select>
<option></option>
<option value='any'>long...sentence</option>
will produce a very long dropdown box before users selected anything
how can I reduce the dropdown box length ?thanks

[Bear Bibeault]

In modern browsers (read, not NN4), you can control the width of the dropdown with the width CSS attribute.
A simple applicaton of it could be:

<select style="width:88px" ...

hth,
bear

[sunitha reghu]

Originally posted by Ken Shamrock:
for this tag like
<select>
<option></option>
<option value='any'>long...sentence</option>
will produce a very long dropdown box before users selected anything
how can I reduce the dropdown box length ?thanks

<select>
<option></option>
<option value='any'>long...sentence</option>
In which browser. when i checked in ie 6 and ns 4.0 i didnt see a long drop box
Secondly why u need an empty option tag. if u have an empty option tag for users it will be an empty select box

[Ken Shamrock]

To Bear,

<select style="width:88px" ...

Problem arises... See the left image of the pic below, if using width:88px method, although the first option's length is cut, but it can't fully show the option 2 value (long.....sentence) is it possible that the option box lenght will be adjusted according to the option value?

To Sunitha
Pls see the right pic at above, the first option size will be the same as the longest value option below, the looking will be quite bad

[Bear Bibeault]

Ken, "88px" (px = pixels) was just an example. You'll need to adjust the length to whatever value best suits the contents of the dropdown.
As you've seen, without the width style the dropdown will size itself according to the length of the longest option. If you want it smaller than that, you need to figure out what width value gives you the appearance that you are after.
As far as I know there is no straight-forward mechansim to cause the dropdown to size itself automatically to the width of an option other than the longest (if that's what you are after).
hth,
bear
[ March 05, 2003: Message edited by: Bear Bibeault ]

[Garann Means]

Ken,
If you're not married to having a straight-forward, or very elegant, solution, the following works:
<select style="position:absolute;width:100px;" onfocus="this.style.width='500px';" onblur="this.style.width='100px';">
The drop-down's width grows to be as large as you need it when the user enters the field (the position:absolute ought to prevent it from changing the layout of anything else on the page), then goes back to its condensed size when the user moves on. Ugly, but it's the best compromise between form and function I've found.
g.

[Eric Pascarello]

well you can also do it without a real drop down box and use layers and do some nea tricks, or you stuck to the answers shown above.
Eric

[Ken Shamrock]

Hi Garann
The code works if one line contains one dropdown box only . If at the same line I've another box, then the second dropdown box will not be displayed:
My code:
<form>
<select style="position:absolute;width:100px;" onfocus="this.style.width='500px';" onblur="this.style.width='100px';">
<option>1234</option>
<option>......................................111111111111111122222222</option>
</select></form>
<form>
<select style="position:absolute;width:100px;" onfocus="this.style.width='500px';" onblur="this.style.width='100px';">
<option>1234</option>
<option>......................................111111111111111122222222</option>
</select>ddd</form>

[Bear Bibeault]

Actually, the second control is displaying, just overlayed over the first. That's a result of the absolute positioning.
I tried your code on a number of browsers and the controls were pretty badly behaved in an interesting variety of ways. The worst was IE for Macintosh, and the best, interestingly enough, was Safari. But none did what I think you are after.
That's generally the problem with clever solutions. You probably can get this to work, but you're going to need to get a bit more into the positioning aspects of the controls on your forms, and probably have to do some browser-specific adjustments depending upon which browsers are important to you.
Only you can decide how much pain you are willing to take on in order to get the effects you are after.
hth,
bear