Cards inside grid-row and grid-col cause issues in IE11

[stphnwlkr]

When I placed a simple three card layout inside a grid-row+grid-col-12, the layout in IE11 was broken. It appars that this combination overrides the card settings. Attached are images comparing Edge Chromium and IE11.

Inside grid-row grid-col-12

Removing the cards from the grid-row gid-col combinationation resolved the problem

[mejiaj]

@stphnwlkr could you provide some of the markup you used so I can reproduce this issue and debug?

The cards come with their own grid setup via a parent usa-card-group wrapper.

[stphnwlkr]

@mejiaj It was actually an accident that it was left within a grid-row grid-col combination, but it worked fine in all browsers except IE. It literally was just the base card setup inside grid-row and grid-col-12

<div class="grid-row"> <div class="gid-col-12"> <ul class="usa-card-group"> <li class="tablet:grid-col-4 usa-card"> <div class="usa-card__container"> <header class="usa-card__header"> <h2 class="usa-card__heading">Title</h2> </header> <div class="usa-card__media"> <div class="usa-card__img"> <img src="" alt=""> </div> </div> <div class="usa-card__body"> </div> <div class="usa-card__footer"> </div> </div> </li> <li class="tablet:grid-col-4 usa-card"> <div class="usa-card__container"> <header class="usa-card__header"> <h2 class="usa-card__heading">Title</h2> </header> <div class="usa-card__media"> <div class="usa-card__img"> <img src="" alt=""> </div> </div> <div class="usa-card__body"> </div> <div class="usa-card__footer"> </div> </div> </li> <li class="tablet:grid-col-4 usa-card"> <div class="usa-card__container"> <header class="usa-card__header"> <h2 class="usa-card__heading">Title</h2> </header> <div class="usa-card__media"> <div class="usa-card__img"> <img src="" alt=""> </div> </div> <div class="usa-card__body"> </div> <div class="usa-card__footer"> </div> </div> </li> </ul> </div> </div>

[mejiaj]

Thanks, I just wanted to make sure. Looking into it now.

[mejiaj]

@stphnwlkr, this seems to be working as intended.

The image dimensions might be the cause of the issue. I was able to reproduce with an 800x600 image and I was able to fix it with the add-aspect-1x1 and pin-all classes.

Attached is the markup for the image:

<div class="usa-card__img add-aspect-1x1"> 
  <img class="pin-all" src="https://images.unsplash.com/photo-1579800070193-abe62433f737?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=610&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
</div>

You can read more about it on the Card page under Implementation

https://designsystem.digital.gov/components/card/

[stphnwlkr]

I am taking a look at this. All the images are 16:9 so this should not be an issue It is possible the pin-all (undocumented?) class may fix it. I honestly would not spend a lot of time on this, but for the near future the default browser at VA is IE11 (changing soon supposedly, but not holding my breath).

[mejiaj]

I was looking at this suspecting it would be related to issue #3386; which involves flex shorthands not displaying properly in IE11.

You can view the preview here at the bottom of the page.

There are 2 examples:

The first one is based on the example posted above. The second example is the same card group, but not in the nested grid.

 <div class="gid-col-12">

If you fix the typo above everything displays as expected in all browsers.

IE11

[thisisdano]

Fixed in #3480