Components: Mat-Table text vertical alignment wrong in IE 11 browser

[jayakrishna-v]

Bug, feature request, or proposal: vertical text alignment is always top in IE 11 browser. unable to control the alignment.

What is the expected behavior? Need vertical text alignment to be middle in Mat-table in IE 11 browser

What is the current behavior? vertical text alignment is always top in IE 11 browser

What are the steps to reproduce?

Check the official mat-table link below.
https://material.angular.io/components/table/overview

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

IE 11 browser. Angular version 5

Is there anything else we should know?

[oktav777]

flexbox and min-height not working together in IE, you have 2 options:

1. Set a fixed height for rows:

.mat-header-row, .mat-row {
    min-height: 0;
    height: 48px;
}

1. Add a flex parent, so it will use the min-height set on children:

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

[crisbeto]

Will be fixed by https://github.com/angular/material2/pull/6820.

[jayakrishna-v]

Thank you.

[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[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._}