Steps to reproduce
- Define a container (DIV or table) with a certain width, let’s say 800px,
- Define some columns in it (or if DIV, some inline-block divs), let’s say four columns, 60%/10%/10%/20%.
- Place a <select multiple style="100%"> in the 60% column.
- Place some options in the select, one of them with text of around 10-20 words (80-100 chars).
- Place some words or a in the other columns.
- Load the page and see that Edge expands the select to the width of the option with the longest content. The column where the select is placed in expands to more than its 60% and the other columns become smaller.
- Remove "multiple", load again and see that now the select has a real width of 100%, its column stays at 60% all stays in appropriate shape.
In FireFox, IE11 and Chrome the <select multiple style="width:100%"> doesn’t affect the containers with. So I suppose it’s a rendering issue of Edge.
Please view the following example page in different browsers to see the behavior:
Comments and activity
Edge build information
Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Assigned To to “firstname.lastname@example.org”
Changed Assigned To to “bbrinza”
Changed Assigned To from “bbrinza” to “Bogdan B.”
Changed Status to “Confirmed”
A workaround for this problem is to add table-layout: fixed on the table, when using the select element within the table. This will force the select box to follow the table lay-out.