Form elements

Forum Moderators: open

Message Too Old, No Replies

Form elements

setting width of select menu

ControlZ

8:56 am on Jun 18, 2005 (gmt 0)

I know the size (width) of the select drop down menu in a form is set by the longest word, BUT is there is way to set the width of all the select menu boxes so they are the same width? I don't want to set option value to "none" and use --------.

I have a form with several select menus all with varying width and want to make each menu the same width in order to improve appearence.

Can this be accomplished using css? Can't find any info on this.

grandpa

9:16 am on Jun 18, 2005 (gmt 0)

CSS is what you need. Something like this will set your width.

<head>
<style type="text/css">
.cell { width:100px;}
</style>
</head>

<select class=cell size="1" name="selected">
<option value="variable">Description</option>
</select>

Use the same class on all of your select statements. Adjust width as needed in the style code.

simonwheatley

9:25 am on Jun 18, 2005 (gmt 0)

You probably need to check that this doesn't cut off your text in the drop downs if you do this (set width with CSS). If I recall correctly, Firefox handles this gracefully, but IE doesn't; although it could be the other way round.

Moby_Dim

3:25 pm on Jun 18, 2005 (gmt 0)

You even need not to use CLASSes, just use type selector:

ControlZ

3:45 pm on Jun 19, 2005 (gmt 0)

Thanks all! Firefox handles the css nicely (expand the drop down to incoporate the longest word), but IE chops the longer words in the menu off.

Is there something I can add to fix this problem in IE?

Moby_Dim

4:00 am on Jun 20, 2005 (gmt 0)

With 'pure' css - the answer may be 'no' imho. But it is possible if you create a javascript function (event handler) to change the width.

Form elements

setting width of select menu

ControlZ

grandpa

simonwheatley

Moby_Dim

ControlZ

Moby_Dim

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week