Adding mat-sort-header breaks the templates flex box layout.

[oleersoy]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Here's a stackblitz with the header column words centered using flexbox:
https://stackblitz.com/edit/angular-minimal-material-table-demo-center-header?file=src%2Fapp%2Fapp.component.html

Steps to reproduce:

1. Add mat-sort-header to the demo

Expected Behavior

The header should maintain the vertical layout of the words.

Actual Behavior

The words are flattened and joined without a space.

Environment

• Angular: 8.2.0
• CDK/Material: 8.1.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[oleersoy]

Note that if we alter the directives CSS like this:

    .mat-sort-header-button {
        border: none;
        background: 0 0;
        /* display: flex; */
        /* align-items: center; */
       padding: 0;
       cursor: inherit;
       outline: 0;
       font: inherit;
       color: currentColor;
}

Then that solves it. As far as I can tell this is fine. We still get the arrows indicating the sort direction and it looks fine.

I did this via the browser developer tools. How can we override the CSS created by the directive. I tried both styles.scss and the components local CSS file, but neither override the CSS ... in a way that it ignores the display and align-items properties.

[oleersoy]

I think the problem is that the sort buttons wraps the header content like this:

<button class="mat-sort-header-button" type="button" aria-label="Change sorting for annualDemandLevel"><div _ngcontent-djx-c1="">Annual</div><div _ngcontent-djx-c1="">Demand</div><div _ngcontent-djx-c1="">Level</div></button>

The button should really be a sibling of the header content or it should not change the flex layout of the header content.

[oleersoy]

Related SO posts:

https://stackoverflow.com/questions/57763295/altering-the-css-added-by-an-angular-directive

https://stackoverflow.com/questions/57750213/centering-text-vertically-in-a-mat-header-col

[andrewseguin]

This will likely be fixed by #13297 when we adjust the innerHTML of the sort header (removing the button)

[jelbourn]

Closing as probably fixed in #13297

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