Search code examples
htmlcssinternet-explorer-11

Prevent Overlap When Using IE11 CSS Grid

I'm making a date picker component that includes a calendar which I'm styling using CSS grid. It works great in all browsers except IE11 which shows all the elements in the same position in the top left corner. Am I missing an IE11 specific css property that will prevent this or is it not feasible for this to work in IE11?

How it looks in Chrome:

output in chrome

How it looks in IE11

output in ie11

Here's the code snippet:

.date-picker .dates .days {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
}

.date-picker .dates .days-of-week {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
}

.date-picker .dates .days .day {    
    margin-top: .5em;
    margin-bottom: .5em;
    height: 36px;
    width: 36px;
    
}

.date-picker .dates .days-of-week .day {    
    height: 36px;
    width: 36px;
}
<div
      id="date-picker"
      class="date-picker relative cursor-pointer input select text-1_25 active"
      min="2021-04-28"
      max="2021-05-28"
    >
      <div
        class="
          dates
          hidden
          absolute
          left-0
          right-0
          px-24
          py-16
          bg-white
          rounded-16
          shadow-xl
          active
        "
      >
        <div
          class="
            days-of-week
            border-b-solid border-gray-a9acc4 border-b
            text-gray-65657b
            py-8
          "
        >
          <div class="day">S</div>
          <div class="day">M</div>
          <div class="day">T</div>
          <div class="day">W</div>
          <div class="day">T</div>
          <div class="day">F</div>
          <div class="day">S</div>
        </div>

        <div class="days">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="day">1</div>
          <div class="day">2</div>
          <div class="day">3</div>
          <div class="day">4</div>
          <div class="day">5</div>
          <div class="day">6</div>
          <div class="day">7</div>
          <div class="day">8</div>
          <div class="day">9</div>
          <div class="day">10</div>
          <div class="day">11</div>
          <div class="day">12</div>
          <div class="day">13</div>
          <div class="day">14</div>
          <div class="day selected">15</div>
          <div class="day">16</div>
          <div class="day">17</div>
          <div class="day">18</div>
          <div class="day">19</div>
          <div class="day">20</div>
          <div class="day">21</div>
          <div class="day">22</div>
          <div class="day">23</div>
          <div class="day">24</div>
          <div class="day">25</div>
          <div class="day">26</div>
          <div class="day">27</div>
          <div class="day">28</div>
          <div class="day inactive">29</div>
          <div class="day inactive">30</div>
          <div class="day inactive">31</div>
        </div>
      </div>
    </div>

Solution

  • After doing some more research it seems that I have to specify each cell's position in the grid in order for it to display correctly in IE11

    So the css would look like this:

    .date-picker .dates .days {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
}

.date-picker .dates .days-of-week {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
}

.date-picker .dates .days .day {    
    margin-top: .5em;
    margin-bottom: .5em;
    height: 36px;
    width: 36px;
    
}

.date-picker .dates .days-of-week .day {    
    height: 36px;
    width: 36px;
}

/* Because of IE11 we have to specify every cells place in the grid */

/* Days of the week cell placement */
.days-of-week div:nth-child(1){
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days-of-week div:nth-child(2){
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
}


.days-of-week div:nth-child(3){
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
}


.days-of-week div:nth-child(4){
    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 1;
    grid-row: 1;
}


.days-of-week div:nth-child(5){
    -ms-grid-column: 5;
    grid-column: 5;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days-of-week div:nth-child(6){
    -ms-grid-column: 6;
    grid-column: 6;
    -ms-grid-row: 1;
    grid-row: 1;
}


.days-of-week div:nth-child(7){
    -ms-grid-column: 7;
    grid-column: 7;
    -ms-grid-row: 1;
    grid-row: 1;
}


/* Day cell placement */
/* Row one */
.days div:nth-child(1){
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days div:nth-child(2){
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days div:nth-child(3){
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days div:nth-child(4){
    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days div:nth-child(5){
    -ms-grid-column: 5;
    grid-column: 5;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days div:nth-child(6){
    -ms-grid-column: 6;
    grid-column: 6;
    -ms-grid-row: 1;
    grid-row: 1;
}

.days div:nth-child(7){
    -ms-grid-column: 7;
    grid-column: 7;
    -ms-grid-row: 1;
    grid-row: 1;
}

/* Row two */
.days div:nth-child(8){
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
}

.days div:nth-child(9){
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
}

.days div:nth-child(10){
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 2;
    grid-row: 2;
}

.days div:nth-child(11){
    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 2;
    grid-row: 2;
}

.days div:nth-child(12){
    -ms-grid-column: 5;
    grid-column: 5;
    -ms-grid-row: 2;
    grid-row: 2;
}

.days div:nth-child(13){
    -ms-grid-column: 6;
    grid-column: 6;
    -ms-grid-row: 2;
    grid-row: 2;
}

.days div:nth-child(14){
    -ms-grid-column: 7;
    grid-column: 7;
    -ms-grid-row: 2;
    grid-row: 2;
}

/* Row three */
.days div:nth-child(15){
    -ms-grid-column: 1;
    grid-column: 1;
      -ms-grid-row: 3;
    grid-row: 3;
}

.days div:nth-child(16){
    -ms-grid-column: 2;
    grid-column: 2;
      -ms-grid-row: 3;
    grid-row: 3;
}

.days div:nth-child(17){
    -ms-grid-column: 3;
    grid-column: 3;
      -ms-grid-row: 3;
    grid-row: 3;
}

.days div:nth-child(18){
    -ms-grid-column: 4;
    grid-column: 4;
      -ms-grid-row: 3;
    grid-row: 3;
}

.days div:nth-child(19){
    -ms-grid-column: 5;
    grid-column: 5;
      -ms-grid-row: 3;
    grid-row: 3;
}

.days div:nth-child(20){
    -ms-grid-column: 6;
    grid-column: 6;
      -ms-grid-row: 3;
    grid-row: 3;
}

.days div:nth-child(21){
    -ms-grid-column: 7;
    grid-column: 7;
      -ms-grid-row: 3;
    grid-row: 3;
}

/* Row four */
.days div:nth-child(22){
    -ms-grid-column: 1;
    grid-column: 1;
        -ms-grid-row: 4;
    grid-row: 4;
}

.days div:nth-child(23){
    -ms-grid-column: 2;
    grid-column: 2;
        -ms-grid-row: 4;
    grid-row: 4;
}

.days div:nth-child(24){
    -ms-grid-column: 3;
    grid-column: 3;
        -ms-grid-row: 4;
    grid-row: 4;
}

.days div:nth-child(25){
    -ms-grid-column: 4;
    grid-column: 4;
        -ms-grid-row: 4;
    grid-row: 4;
}

.days div:nth-child(26){
    -ms-grid-column: 5;
    grid-column: 5;
        -ms-grid-row: 4;
    grid-row: 4;
}

.days div:nth-child(27){
    -ms-grid-column: 6;
    grid-column: 6;
        -ms-grid-row: 4;
    grid-row: 4;
}

.days div:nth-child(28){
    -ms-grid-column: 7;
    grid-column: 7;
        -ms-grid-row: 4;
    grid-row: 4;
}

/* Row five */
.days div:nth-child(29){
    -ms-grid-column: 1;
    grid-column: 1;
        -ms-grid-row: 5;
    grid-row: 5;
}

.days div:nth-child(30){
    -ms-grid-column: 2;
    grid-column: 2;
        -ms-grid-row: 5;
    grid-row: 5;
}

.days div:nth-child(31){
    -ms-grid-column: 3;
    grid-column: 3;
        -ms-grid-row: 5;
    grid-row: 5;
}

.days div:nth-child(32){
    -ms-grid-column: 4;
    grid-column: 4;
        -ms-grid-row: 5;
    grid-row: 5;
}

.days div:nth-child(33){
    -ms-grid-column: 5;
    grid-column: 5;
        -ms-grid-row: 5;
    grid-row: 5;
}

.days div:nth-child(34){
    -ms-grid-column: 6;
    grid-column: 6;
        -ms-grid-row: 5;
    grid-row: 5;
}

.days div:nth-child(35){
    -ms-grid-column: 7;
    grid-column: 7;
        -ms-grid-row: 5;
    grid-row: 5;
}

/* Row six */
.days div:nth-child(36){
    -ms-grid-column: 1;
    grid-column: 1;
        -ms-grid-row: 6;
    grid-row: 6;
}

.days div:nth-child(37){
    -ms-grid-column: 2;
    grid-column: 2;
        -ms-grid-row: 6;
    grid-row: 6;
}

.days div:nth-child(38){
    -ms-grid-column: 3;
    grid-column: 3;
        -ms-grid-row: 6;
    grid-row: 6;
}

.days div:nth-child(39){
    -ms-grid-column: 4;
    grid-column: 4;
        -ms-grid-row: 6;
    grid-row: 6;
}

.days div:nth-child(40){
    -ms-grid-column: 5;
    grid-column: 5;
        -ms-grid-row: 6;
    grid-row: 6;
}

.days div:nth-child(41){
    -ms-grid-column: 6;
    grid-column: 6;
        -ms-grid-row: 6;
    grid-row: 6;
}

.days div:nth-child(42){
    -ms-grid-column: 7;
    grid-column: 7;
        -ms-grid-row: 6;
    grid-row: 6;
}