How to Set the Width of Select Box Options

Select Box Option width Issue

This is not a strange behavior at all. It's how it is intended to work.

Options cannot be wrapped inside a select menu. The select element by default occupies the most space available to accommodate the largest option width plus the dropdown arrow with. If the container (not browser in this case) width is not enough to accommodate the full option width + dropdown arrow, ellipsis (...) appears in the select element.

Here are your options:

• Constraint the select width using pixels. However, the options window will take up as much width as possible within the browser to show the full option content. If it exceeds browser width then ellipsis (...) appear at the end of each option.

• Skip the native select and replace it with a custom-tailored dropdown menu, that can be restricted using CSS styling, or you can allow the content to wrap.

How can I set the width of HTML select element, without considering the width of each option

you should use width attribute instead of max-width.
correct your code to below sample:

<select class="form-control"style="width:150px">
    <option value="1">option 1 </option>
    <option value="2">option 2sdsdsdsd</option>
    <option value="3">option 3</option>
</select>

How can change width of dropdown list?

Try this code:

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

CSS:

#wgtmsr{
 width:150px;   
}

If you want to change the width of the option you can do this in your css:

#wgtmsr option{
  width:150px;   
}

Maybe you have a conflict in your css rules that override the width of your select

DEMO

Set width of dropdown element in HTML select dropdown options

You can style (albeit with some constraints) the actual items themselves with the option selector:

select, option { width: __; }

This way you are not only constraining the drop-down, but also all of its elements.

Select option width

If you want to set the same width on all select elements in a document, you can write e.g.

<style>
select { width: 5.5em }
</style>

in the head part. If you wish to do that for some select elements only, you need to replace the selector select by something more restrictive, e.g. select.foo to restrict the effect to those select elements that have the class=foo attribute.

This is tricky because you need a width that is sufficient for all options, and you probably want to get as close to the maximal width as possible. The widths of options depend on their text and on the font. (Using the px makes things even worse. Then things would depend on font size, too.)

Consider whether it is necessary to set the widths the same. It is just an esthetic preference, not shared by all people, and it may in fact be bad for usability. A dropdown with short options should perhaps look different from another dropdown that has long options.

How to expand 'select' option width after the user wants to select an option

If you have the option pre-existing in a fixed-with <select>, and you don't want to change the width programmatically, you could be out of luck unless you get a little creative.

• You could try and set the title attribute to each option. This is non-standard HTML (if you care for this minor infraction here), but IE (and Firefox as well) will display the entire text in a mouse popup on mouse hover.
• You could use JavaScript to show the text in some positioned DIV when the user selects something. IMHO this is the not-so-nice way to do it, because it requires JavaScript on to work at all, and it works only after something has been selected - before there is a change in value no events fire for the select box.
• You don't use a select box at all, but implement its functionality using other markup and CSS. Not my favorite but I wanted to mention it.

If you are adding a long option later through JavaScript, look here: How to update HTML “select” box dynamically in IE

How to make the Selected Option the width of the current Selected Option's text?

Based on your second link you can do it like this:

var selectId = document.getElementById("yourSelect");

selectId.onchange=function(){
   var selectedValue = selectId.options[selectId.selectedIndex].value; 
   var selectedText = selectId.options[selectId.selectedIndex].text;

   selectId.style.width = 20 + (selectedText.length * 8) + "px";
}

Test:
http://jsfiddle.net/ndquxquu/

---

Related Topics