Is there a way to fix the width of drop down list?

Question

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).

Answer 1

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.

Answer 2

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.

Answer 3

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?

Answer 4

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;
}