How can change width of dropdown list?
HtmlCssListDrop Down-MenuHtml SelectHtml Problem Overview
I have a listbox and I want to decrease its width.
Here is my code:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<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>
This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width
of the dropdown list on Firefox?
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
How the select box looks like is also depending on your browser.
You can build your own control or use Select2 https://select2.org
Solution 3 - Html
This:
<select style="width: XXXpx;">
XXX = Any Number
Works great in Google Chrome v70.0.3538.110
Solution 4 - Html
try the !important
argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
or
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Solution 5 - Html
Create a css and set the value style="width:50px;"
in css code. Call the class of CSS in the drop down list. Then it will work.
Solution 6 - Html
If you want to control the width of the list that drops down, you can do it as follows.
CSS
#wgtmsr option {
width: 50px;
}
Solution 7 - Html
This worked for me:
ul.dropdown-menu > li {
max-width: 144px;
}
in Chromium and Firefox.