how to set height of ListBox to auto.

Question

I have 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 height of this to auto i.e ido not want scrollbar to appear. I tried Height:auto; But it is not working in IE. How should i do this.

Answer 1

try with height:100%. It is working in ie6

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.

Answer 3

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 4

Set the size attribute equal to the number of items(options).

var select = $('#targetField');
select.attr('size', select[0].options.length);