• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Liutauras Vilda
  • Paul Clapham
Sheriffs:
  • paul wheaton
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Piet Souris
Bartenders:
  • Mike London

[html form]Dropdown box lenght problem

 
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67694
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:

hth,
bear
 
Ranch Hand
Posts: 937
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67694
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Ranch Hand
Posts: 214
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67694
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
reply
    Bookmark Topic Watch Topic
  • New Topic