Set width of <select> tag in a form

[djd4n]

Hi

I have a <select> item in a form and I would like to re-size it.

I have achieved it so far using:

<select STYLE="width: 170px">
<option>- Select from list -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

but if one of the <option> items is longer than the 170px it is cut off.

Basically I would like the drop down part of the menu to re size to accommodate each of the <option> items in full when "dropped down", but to remain at 170px when not "dropped down".

Is this possible with just HTML and CSS or do I need to start looking at Javascript?

cheers

Dan

[BlobFisk]

Hi djd4n,

This is a difficult one. I know no way of getting the width of an option. It gets its width from the select.

One way may be to use a script to get the length of the text in the option and use some metrics to size the select that way. It's quite a hack and you may be better off just allowing the select to take it's own size.

HTH

[djd4n]

The page is PHP and reads the <option> values from a table in a db,

can an <option> have 2 lines?

Could I write a function to put something like \n after a certain number of words?

[samuil]

Option element definition is clear:

[pre]
<!ELEMENT OPTION - O (#PCDATA)  -- selectable choice -->
<!ATTLIST OPTION
 %attrs;    -- %coreattrs, %i18n, %events --
 selected (selected) #IMPLIED
 disabled (disabled) #IMPLIED -- unavailable in this context --
 label %Text;  #IMPLIED -- for use in hierarchical menus --
 value CDATA  #IMPLIED -- defaults to element content --
 >
[/pre]

It may contain PCDATA, so virtually anything can be inside it - also BR element. Spec says nothing about width of option, but rendering example contains droplist which width differs from select element.