fix(table): row content not centered in IE

[crisbeto]

Fixes the table row content not being centered vertically in IE due to a flex bug.

Fixes #6813.

[andrewseguin]

LGTM

Was this a bug that was around before beta 10? I don't remember seeing it in IE before the release.

[crisbeto]

I'm not sure, I don't think I've seen it in earlier betas.

[mmalerba]

@crisbeto some screenshot tests seem to show that this is increasing the row height, is that expected?

[mmalerba]

caretaker note: some screenshot tests in g3 show larger row height as a result of the PR, needs investigation

[mmalerba]

Is there a way to do this so that it won't require people who are overriding the min-height on .mat-row to also have to override it on .mat-row::after?

If not i think we have to consider this a breaking change, a lot of people seem to be overriding this min-height value.

(removing release: patch, re-add if we find a non-breaking solution, otherwise we can add release: major)

[crisbeto]

Switched the min-height to inherit which still works and makes it more convenient to override. Setting back the patch label @mmalerba.

[oktav777]

Isn't this hacky? There is a better workaround. Just add

.mat-table {
    display: flex;
    flex-direction: column;
}

[andrewseguin]

Looks like we're good on internal tests now so this can start getting in. Quick note though, can you add a link to the IE issue in the code? https://connect.microsoft.com/IE/feedback/details/802625

@oktav777 That works but we try to avoid setting display properties on the outermost component element containers

[crisbeto]

Added that comment @andrewseguin.

[gizmodus]

I am having the same issue again in IE. The problem seems to be lying here (table.scss):

mat-cell, mat-header-cell, mat-footer-cell {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  word-wrap: break-word;
  min-height: inherit;
}

If min-height: inherit; is removed, the cells are displayed correctly.

[b-mi]

I solved this problem with this style for IE. Work texts with badges.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .mat-header-row, .mat-row {
    -ms-flex-align: stretch;
  }
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}