Encountering issues with CSS Grid in IE11. (not surprising, right?)
The grid has 2 columns - the first column contains labels for a form, while the second column holds <input> and <select> elements.
All input elements have a size attribute set to control their length. The uniform width given to all inputs doesn't align with the overall software aesthetics we aim for.
While everything appears fine in Chrome, IE11 forces the input and select elements to be of equal width.
Comparison between Chrome on the left and IE11 on the right:
https://i.sstatic.net/cEBt1.png
Referencing an example:
#testParms {
display: -ms-grid;
display: grid;
justify-items: start;
align-items: center;
-ms-grid-columns: max-content;
grid-auto-columns: max-content;
grid-template-areas: "a a";
}
#testParms .labelDiv {
-ms-grid-column: 1;
}
#testParms> :not(labelDiv) {
-ms-grid-column: 2;
}
.row1 {
-ms-grid-row: 1;
}
.row2 {
-ms-grid-row: 2;
}
.row3 {
-ms-grid-row: 3;
}<div id="testParms">
<div class="labelDiv row1"><label>Label 1</label></div>
<input class="row1" type="text" size="20" />
<div class="labelDiv row2"><label>Label 2</label></div>
<input class="row2" type="text" size="2" />
<div class="labelDiv row3"><label>Label 3</label></div>
<select class="row3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>Note that the labelDiv divs around the labels address another issue with grids in IE11. Labels placed solely seem to ignore the -ms-grid-row style and aggregate in row1.
Although achieving this layout would be simpler with a table, I'm striving to avoid taking that approach.