Here is what I got:

<select id="box1">
   <option>ABCDEFG</option>
</select>  

<select id="box2">
   <option>ABCDEFGHIJKLMNO</option>
</select>

I have 2 different Drop Down lists. Since the width of a drop down list depends on the width of the longest text in the option, I end up with 2 drop down lists with 2 different widths. This makes my webpage look goofy.

What I want is to set it so that both of my drop down lists will have the same width (I'd prefer the width to be very long, so that even the longest item won't be truncated).

Here is what I got:

<select id="box1">
   <option>ABCDEFG</option>
</select>  

<select id="box2">
   <option>ABCDEFGHIJKLMNO</option>
</select>

I have 2 different Drop Down lists. Since the width of a drop down list depends on the width of the longest text in the option, I end up with 2 drop down lists with 2 different widths. This makes my webpage look goofy.

What I want is to set it so that both of my drop down lists will have the same width (I'd prefer the width to be very long, so that even the longest item won't be truncated).

• javascript
• html
• drop-down-menu

• 1 Please edit and remove the word "length". If you mean width, say width. If you are talking about the number of options displayed, please re-phrase the question pletely. – rjmunro Commented Mar 8, 2010 at 23:40
• Fixed. Srry for the confusion – Thang Pham Commented Mar 8, 2010 at 23:44
• Hey no problem — that’s why Stack Overflow is part-wiki, so that everything can be improved. – Paul D. Waite Commented Mar 9, 2010 at 12:54

4 Answers 4

Length referring to number of options visible?? If that is the case use size. Here is the documentation. Let me know if you mean any different.

After EDIT: Set the width for the select. But it would be hard to set width to show only particular length. Second Edit: You can't do that using CSS, you got to use javascript. On every change of the select, you have to see which of the two elements has maximum width and set the same to the other.

Use the following line.It will fix the width of the drop down list.

<select id='box1' style='width: 200px;'>

<select id='box2' style='width: 200px;'> 

If you want to mention the width using css,you can use the following code.

#container select {
    width: 150px;
}

You can use CSS to set the width of your <select> element, but it’ll be difficult to get the width to match a given number of characters exactly.

Why would you want the option’s text to be clipped?

You need to use JavaScript after the page loads (give your list id="listA"):

document.getElementById('listA').length = 20

This will effectively truncate it at 20 items.