CSS GRID for Internet Explorer

Help Requests
1

Hi all,

I know, this topic affects aurelia only secondaryly but I hope, that someone can still give me a clever hint :slight_smile:

In my project I tried to remove the bootstrap and to write own css using CSS GRID. The technic is quite impressiv and works really well… in all browsers except Internet Explorer … . Currently my major problem is, that the internet explorer wants to know in which column and in which row an information is. But in forms with an undefined number of input fields and buttons I’m not able to give him the information. Example:

<form>
    <label>Input1</label>
    <input type="text" />

    <label>Input2</label>
    <input type="text" />

    <button type="submit">Submit</button>
</form>

In this example I’m not able to set the button always in the last row.

Is there a clever trick or any Polyfill in Aurelia that makes it working or that translates my default structure into Internet Explorer-readable-structure?

P.S.: I tried to create a fiddle, but fiddle as well as codepen don’t support the internet explorer :smiley::see_no_evil:

2

Just make a codepen so we can see the code. (I am saying this because I am not getting the question exactly?) I am guessing you went through all the options for css grid already.

3

Same for codePen: “CodePan does not support this Browser” :see_no_evil:
Maybe I’m trying to post the code so that you can see what I mean:

<html>

<head>
<style>
form{
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    border: 1px solid lightgrey;
}

form label{
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: span 6;
}

form input,
form button{
	-ms-grid-column: 2;
	-ms-grid-column-span: 12;
	grid-column: span 6;
}

/*INTERNET EXPLORER WORKAROUND*/
form label:nth-child(1),
form input:nth-child(1){
	-ms-grid-row: 1;
}
form label:nth-child(2),
form input:nth-child(2){
	-ms-grid-row: 2;
}

</style>

</head>
<body>

<form>
    <label>Input1</label>
    <input type="text" />

    <label>Input2</label>
    <input type="text" />

    <button type="submit">Submit</button>
</form>

</body>
</html>

Opening the html in Firefox, chome etc. everything is great… Opening the form in IE you’ll see that the button is in the first row. It should always be on the bottom of the form… but with the shown IE-Workaround where I must set the row manually it’s not possible.

4

I think this one is not going to be simply done with a magic polyfill which just works. Take a look at this article for some more info https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

1 Like