How to set height of ListBox to auto

Question

I have a Html ListBox:

 <select id="targetField" multiple="multiple" name="D1" style="width:200px;">
              <option>INDIA</option>
              <option>USA</option>
              <option>UK</option>
              <option>AUSTRALIA</option>
              <option>RUSSIA</option>
              <option>FRANCE</option>
              <option>HOLLAND</option>
 </select>

I need to set the height of this to auto i.e I do not want scrollbar to appear.

I tried Height:auto; But it is not working in IE.

How should I do this?

Answer 1

Set the size property to the number of items, like this:

<select id="targetField" multiple name="D1" style="width:200px;" size="7">

If you need to do it programmatically, you can set all <select> elements to their option length, like this:

$("select").attr("size", function() { return this.options.length; });

You can test it out here.

Answer 2

You can modify it using 'line-height' eighter and putting values to 'height'.

<select id="targetField" multiple="multiple" name="D1" style="width:200px; line-height:27px; float:left; height:130px;">
              <option>INDIA</option>
              <option>USA</option>
              <option>UK</option>
              <option>AUSTRALIA</option>
              <option>RUSSIA</option>
              <option>FRANCE</option>
              <option>HOLLAND</option>
</select>

Hope this helps.