Unwanted bottom border in Angular material column header

Question

I have upgraded Angular material to 9, but after upgrade when I sort mat-table columns, after sorting a bottom border appears under the sorted column heading and this border disappear on mouse-click I checked browser CSS and found out that below CSS is causing this problem

CSS

[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container
{border-bottom:solid 1px currentColor}

but this CSS is not in my code I am not sure from where it is taking, I tried to overwrite but no results

HTMl Heading code

  <ng-container matColumnDef="Date">
      <th style="background-color: white;" mat-header-cell mat-sort-header *matHeaderCellDef 
      ><span>Date</span></th>
      <td mat-cell *matCellDef="let item">
        {{item.Date}}
      </td>
</ng-container>

is there anyway I can overwrite or get rid of this

score 0 · Accepted Answer · answered Jul 10 '22 at 04:25

In your attempt to override the styling, did you try using ::ng-deep?

Because of Angular's view encapsulation, you can't override child-component styles without a mechanism to pierce through that encapsulation, and ::ng-deep provides that mechanism.

So, given the mat-table CSS that you've identified as the culprit here, in the CSS of your component that's hosting the mat-table, you should be able to override that style rule by prefixing the selectors with :host ::ng-deep:

:host ::ng-deep [mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,
:host ::ng-deep [mat-sort-header].cdk-program-focused .mat-sort-header-container {
  border-bottom: none;
}

By including ::ng-deep, encapsulation is removed from the final, framework-generated selector, but by also including :host, the generated selector confines the rule to just your host component, otherwise it would become a global, application-wide rule. (If a truly global style is what you really want, then don't include :host.)

Hi thanks, I am able fix this and posted an answer for this with my approach, I have also tried your solution and it worked — ani.lava, Jul 11 '22 at 05:20

score 0 · Answer 2 · answered Jul 11 '22 at 05:17

I am able to fix this with FocusMonitor

import {FocusMonitor} from '@angular/cdk/a11y';

In ngAfterViewInit()

  ngAfterViewInit() {
    var items:any = document.getElementsByClassName('class_name');
    for (let i = 0; i < items.length; i++) {
      this.focusMonitor.stopMonitoring(items[i]);
    }
  }

Unwanted bottom border in Angular material column header

2 Answers2