CSS Grid is resizing input elements in IE11

user_1195482 0
Viewed 111

I'm having problems with CSS Grid in IE11. (yah, shocker right?)

I have a grid with 2 columns. The first column is labels for a form and the 2nd column is <input> and <select> elements.

The input elements all have a size attribute to control how long they are. The modern look-and-feel of making all inputs the same width doesn't fit with the look-and-feel of the rest of our software.

This all works in Chrome, but in IE11, the input and select elements are all forced to be the same width.

Here's how it looks. Chrome on the left, IE11 on the right.

Chrome (left), IE (right)

Here's 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 the labelDiv divs around the labels are there to fix another problem with grids in IE11. If I just put the labels by themselves, they seem to ignore the -ms-grid-row style and all go to row1.

I know I could do this easily with a table, but I'm trying to avoid going that route.

internet-explorer-11 css-grid css html
1 Answers

You have justify-items: start in the container. That works for modern browsers (including Chrome). But notice there's no prefix for IE11.

That's because, as far as I can tell, it doesn't exist. Hence, justify-items: start isn't recognized by IE11.

However, such a function does exist at the grid item level. Add this to your code:

#testParms > :not(labelDiv) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-column-align: start; /* NEW */
}

This is the equivalent for justify-self: start, which you could also add to the item, if you wish. But you don't need to because it's covered already by justify-items on the container.

user_35972760
Related