Is there a way to set the width of <option> in a <select>?

[Man-wai Chang]

--
iTech Consulting Co., Ltd.
Expert of ePOS solutions
Website: http://www.itech.com.hk (IE only)
Tel: [phone] Fax: [phone]

[=?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=]

Man-wai Chang wrote:

[from the subject line:]
Is there a way to set the width of <optionin a <select>?

You could use styles, like this:

<select style="width: 200px">
or:
<option style="width: 200px">

Both will work syntactically, but the former is guaranteed to produce
the desired effect in all CSS-conforming browsers.

You can also put this in your stylesheet instead of cluttering up the
markup with individual styles (especially if there are more than one
element that needs this width).

--
Kim André Akerø
- ki******@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)

[Jukka K. Korpela]

Scripsit Kim André Akerø:

You could use styles, like this:

<select style="width: 200px">
or:
<option style="width: 200px">

But what you _should_ do (assuming it's a good idea to set the width in the
first place - it seldom is) is to place a style sheet rule like
select { width: 15em; }
into your CSS file.

Both will work syntactically, but the former is guaranteed to produce
the desired effect in all CSS-conforming browsers.

No, you cannot guarantee such things. CSS is just optional presentational
suggestions, both in theory and in practice. (Besides, an <optionelement
is by default an inline element, so a conforming browser will ignore a width
setting it even for formal reasons.)

You can also put this in your stylesheet instead of cluttering up the
markup with individual styles (especially if there are more than one
element that needs this width).

Well, yes.

But you should also consider _why_ you want to set the width of <select>.
It's almost always based on a wrong analysis and will create problems rather
than solve them.

P.S. Style sheet issues belong to c.i.w.a.stylesheets. There is no way to
set the width of a select or option element in HTML, except in the sense
that the width is affected by the content length of the longest option. Old
versions of Netscape recognized a width="..." attribute in <select>, but
even modern descendants of Netscape, like Firefox, don't support it any
more.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-03-08, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit Kim André Akerø:

>You could use styles, like this:

<select style="width: 200px">
or:
<option style="width: 200px">

But what you _should_ do (assuming it's a good idea to set the width in the
first place - it seldom is) is to place a style sheet rule like
select { width: 15em; }
into your CSS file.

>Both will work syntactically, but the former is guaranteed to produce
the desired effect in all CSS-conforming browsers.

No, you cannot guarantee such things. CSS is just optional presentational
suggestions, both in theory and in practice. (Besides, an <optionelement
is by default an inline element, so a conforming browser will ignore a width
setting it even for formal reasons.)

But a <selectelement, in the "informative" CSS 2.1 default stylesheet,
is display: inline-block, on which you can set a width.

This is probably why Kim André Akerø said setting width on <select>
rather than on <optionshould work in CSS-conforming browsers. Sounds
like good advice.

[...]

P.S. Style sheet issues belong to c.i.w.a.stylesheets.

I'll change the Followup-To then (is that the correct thing to do in
this situation?)

[=?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=]

Jukka K. Korpela wrote:

Scripsit Kim André Akerø:

You could use styles, like this:

<select style="width: 200px">
or:
<option style="width: 200px">

But what you should do (assuming it's a good idea to set the width in
the first place - it seldom is) is to place a style sheet rule like
select { width: 15em; } into your CSS file.

Both will work syntactically, but the former is guaranteed to
produce the desired effect in all CSS-conforming browsers.

No, you cannot guarantee such things. CSS is just optional
presentational suggestions, both in theory and in practice. (Besides,
an <optionelement is by default an inline element, so a conforming
browser will ignore a width setting it even for formal reasons.)

Setting the width to the <selectelement rather than the <option>
element is preferred if you really need to set the width at all.

However, <optionWILL syntactically accept a width, although browsers
will interpret this differently. For browsers that support CSS
properly, applying a width to the <selectelement is guaranteed to
produce better results than applying it to the <optionelement.

You can also put this in your stylesheet instead of cluttering up
the markup with individual styles (especially if there are more
than one element that needs this width).

Well, yes.

But you should also consider why you want to set the width of
<select>. It's almost always based on a wrong analysis and will
create problems rather than solve them.

Say that to the OP. All I pointed out, is how to do it. In any case,
using styles is his/her only valid option for setting the height and
width for any elements aside from <table>, <colgroup>, <col>, <object>,
<img>, as well as for frames (*shudder*). (I just double-checked the
DTD document to be sure.)

--
Kim André Akerø
- ki******@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)