CODEWITHSUNDEEP
htmlcsslistdrop-down-menuhtml-select
user1844626
user1844626

Reputation: 1868

How can change width of dropdown list?

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?

Upvotes: 83

Views: 620572

Answers (7)

OwethuSotomela
OwethuSotomela

Reputation: 1

You can style it on your CSS file using the id = #wgtmsr.

#wgtmsr{
  width: 50px;
}

And then remove the style element = 'style="width: 50px;"'

Upvotes: 0

Shadow in the Dark
Shadow in the Dark

Reputation: 91

This:

<select style="width: XXXpx;">

XXX = Any Number

Works great in Google Chrome v70.0.3538.110

Upvotes: 9

algorhythm
algorhythm

Reputation: 8728

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

Upvotes: 11

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

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

Upvotes: 93

Vishal Bharti
Vishal Bharti

Reputation: 185

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.

Upvotes: 6

techfoobar
techfoobar

Reputation: 66663

If you want to control the width of the list that drops down, you can do it as follows.

CSS

#wgtmsr option {
    width: 50px;
}

Upvotes: 2

Amyth
Amyth

Reputation: 32949

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

Upvotes: 6

Related Questions