All geek questions in one place

Several choices do not take the full window width in Internet Explorer 9

I have an input with multiple choices with the minimum width set on the select element. Options do not occupy the full width of the available selection window in Internet Explorer 9.

Elements are full width in Chrome and Firefox. How to force option elements to take the entire width of the selection inputs?

Note the Saab element here in Internet Explorer:

Example

This script demonstrates the problem.

 <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

+4
source share
3 answers

As a result, I set the css width attribute to 100% for both the selection parameter and the option, and then the selection elements filled the entire width:

Demo script

 <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>
+2
source

As far as I know, you cannot provide an OPTION layout block in IE. It will expand only to the width of its contents, I do not believe that you can play with its width. You can, as you showed, adjust the width of the SELECT element without any problems.

+2
source

I tested it in some strange way, it does not understand your automatic width when choosing - but if you just set it to the pixel size, you will get a full width marker on it:

See here FIDDLE

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>
+2
source

Source: https://habr.com/ru/post/1484260/

More articles:


All Articles