CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Niraj Choubey
Niraj Choubey

Reputation: 4040

How to set height of ListBox to auto

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?

Upvotes: 10

Views: 16350

Answers (4)

jerjer
jerjer

Reputation: 8766

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

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

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630627

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.

Upvotes: 15

Jeff Norman
Jeff Norman

Reputation: 1044

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.

Upvotes: 1

Chinmayee G
Chinmayee G

Reputation: 8117

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

Upvotes: 0

Related Questions