How Can Change Width of Dropdown List

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

Increase bootstrap dropdown menu width

Add the following css class

.dropdown-menu {
    width: 300px !important;
    height: 400px !important;
}

Of course you can use what matches your need.

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.

Making dropdown width adjust to its content

How about a good oldfashioned white-space: nowrap;?

.dropbtn {  background-color: #4CAF50;  color: white;  padding: 16px;  font-size: 16px;  border: none;  cursor: pointer;}
.dropdown {  position: relative;  display: inline-block;}
.dropdown-content {  position: absolute;  left: 0;  display: none;  background-color: #f9f9f9;  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}
.dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  white-space: nowrap;}
.dropdown-content a:hover {  background-color: #f1f1f1}
.dropdown:hover .dropdown-content {  display: inline-block;}
.dropdown:hover .dropbtn {  background-color: #3e8e41;}

<body>  <div class="dropdown" style="float:left;">    <button class="dropbtn">Left</button>    <div class="dropdown-content" style="left:0;">      <a href="#">Make this phrase appear on one line.</a>      <a href="#">Link 2</a>      <a href="#">Link 3</a>    </div>  </div>
</body>

Adjust the width of dropdown according to the length of the text

First of all span - an inline element so you better use divs. It is a bad practice to put block or inline-block elements inside inline elements.

As mentioned above, it is much better to use some library for that.

Then you can use such script. Width of options calculated on initial select width and width of widest option.

findMaxLengthOpt is looking for an option with a longest text content. There is using a spread operator, that transform HTMLCollection of elements to array, so we can use Array methods such as reduce. This operator gets elements out of iterable object and put them into a new array.

Read this docs and this tutorial.

let selectList = document.querySelector("#opts")// get initial width of select element. // we have to remember there is a dropdown arrow make it a little widerlet initialWidth = selectList.offsetWidth// get text content length (not a value length) of widest option. let maxOptValLen = findMaxLengthOpt(selectList)// calc width of single letter let letterWidth = initialWidth / maxOptValLenlet corCoef = 1.875; // Based on visual appearanceconsole.log(initialWidth, maxOptValLen)
selectList.addEventListener("change", e => {  let newOptValLen = getSelected(e.target).textContent.length  let correction = (maxOptValLen - newOptValLen) * corCoef  let newValueWidth = (newOptValLen * letterWidth) + correction  console.log('new width', newValueWidth, 'new option len', newOptValLen)  e.target.style.width = newValueWidth + "px"}, false);

function getSelected(selectEl) {  return [...selectEl.options].find(o => o.selected)}
function findMaxLengthOpt(selectEl) {  return [...selectEl.options].reduce((result, o) => o.textContent.length > result ? o.textContent.length : result, 0)}

<div class="header">  <p>COMPARE    <select class="select_box" id="opts">      <option value="">Select a dataset</option>      <option value="population">POPULATION</option>      <option value="popdensityperacre">POPULATION DENSITY</option>      <option value="percapitaincome">INCOME</option>      <option value="percentnonwhite">RACIAL DIVERSITY</option>      <option value="percentinpoverty">POVERTY</option>      <option value="medianhomevalue">HOME VALUE</option>      <option value="unemploymentrate">UNEMPLOYMENT</option>      <option value="percapitacriminalarrests">CRIME</option>      <option value="percapitaencampments">HOMELESSNESS</option>      <option value="medianhoursofsummerfog">FOG</option>      <option value="percentinliquefaction">LIQUEFACTION</option>    </select>    BY NEIGHBORHOOD </p></div>

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>

Setting the width of a dropdown list in Bootstrap 3.0

I found the solution by setting the dropdown-menu and button width=100%.

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

Now both the button and dropdown list have the same width, controlled by the column width.

How Can Change Width of Dropdown List