CODEWITHSUNDEEP
htmlcssinternet-explorerstyling
Jace Rhea
Jace Rhea

Reputation: 5018

Multiple select options are not taking the full width of the box on Internet Explorer 9

I have a multiple select input with a min-width set on the select element. The options are not taking up the full width of the available select box in Internet Explorer 9.

The items take up the full width on Chrome and Firefox. How do I make the option elements take the full width of the select input?

Notice the Saab item here in Internet Explorer:

Example

This Fiddle demonstrates the issue

<select style="min-width: 150px; width: auto;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

It works correctly in Chrome:

enter image description here

Upvotes: 5

Views: 2701

Answers (3)

Jace Rhea
Jace Rhea

Reputation: 5018

I ended up setting the css width attribute to 100% for both the select and option, and then the select items filled up the full width:

Demo Fiddle 

<body>
<form action="form_action.asp">
<select style="min-width: 150px; width: 100%;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</form>
</body>

Upvotes: 2

Simon Dragsb&#230;k
Simon Dragsb&#230;k

Reputation: 2399

I tested it out in some odd way it dont understand your auto width on the select - but if you just set it to a pixel size you will get a full width marker on it:

See it here FIDDLE

The code:

<form action="form_action.asp">
<select style="min-width: 150px; width: 1px;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

Upvotes: 2

Mister Epic
Mister Epic

Reputation: 16733

To my knowledge, you can't give OPTION a block layout in IE. It will expand only to the width of its content, I don't believe you can fiddle with its width. You can, as you've demonstrated, adjust the width of the SELECT element without issue.

Upvotes: 2

Related Questions