How can change width of dropdown list?

Question

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?

Solution 1

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

Solution 2

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

This:

<select style="width: XXXpx;">

XXX = Any Number

Works great in Google Chrome v70.0.3538.110

Solution 4

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

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.

View more solutions

Comments

[Chris]

It does work on Firefox 17.0.1.

[techfoobar]

Your code should work fine on ALL browsers..

[StardustGogeta]

Possible duplicate of Set width of dropdown element in HTML select dropdown options

[João Pimentel Ferreira]

Why don't you change the width according to the width of the content? stackoverflow.com/questions/20091481/…

[Chris]

How is that any different than what the OP has?

[Chris]

Inline style definitions override every other styling (unless there's !important), so I don't think so. The OP's original code works fine even on Firefox 17.0.1.

[Alessandro Minoccheri]

@Abody97 maybe he has a conflict in his css

[Chris]

Did you actually try what you're suggesting? If you did, you might notice that the OP's original code already works.

[Amyth]

that is why i am suggesting him to use the !important argument to make sure the code is not conflicting with other styles.

[user1844626]

Thank you so much for your help. yes, the option width wasn't working but now using #wgtmsr option{width:50px;} its working(working by using class too).but before I put width style in every option tag as well as in select tag but that didn't work. yes may be that was overriden.

[Pere]

@Chris or unless you override them with element[style] in your css.

[PJUK]

FYI This does not seem to make any difference on Chrome or IE11, it does however as the OP asked work for Firefox, I was looking for something a little more generic... :(

[Maximillian Laumeister]

This doesn't seem to be working, at least not in Chrome.

[Tass]

Adding !important is the only thing which worked for me. I always forget about it.

[AShah]

select {} never worked but using the name worked great!

[Nandeep Barochiya]

It will not work if the option length is long.