Question 189463 in Html Question posted in
Some basic documentation can be found here.

Html – In Angular, mat-sort-header is having a property of text-align: center. I want to override it and text-align:right. But it is not working

I am not able to override text-align: center in mat-sort-header

I have created a new class and added text-align: right in that class but it is not working.

It is taking the text-align: center from mat-sort-header and not allowing to text-align: right.

Tags:

2

Answers


  1. 0

    Mb u need to use !important for your class?

    Login or Signup to reply.
  2. 0

    I assume you want to align the contents of the header to the right. It won’t work by changing the text-align property. If you inspect the element in the DOM, you’ll see that the mat-sort-header directive puts an additional flex container inside the header, which contains both the header text and the sort arrow. To alight the content to the right, you have to apply justify-content: end; on that container.

    You can add additional class on the header:

    <th class="centered-header" mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>

    And define the class in the global styles.scss:

    .centered-header {  
  .mat-sort-header-container {
    justify-content: end;
  }
}

    Or you can just set it globally without adding new class:

    .mat-sort-header-container {
    justify-content: end;
}

    Note that since this happens inside a new component injected through a directive, this needs to happen in global styles. Alternatively you can use ::ng-deep and place it in your component style, but it will still be promoted to global style (read here), so the effect is pretty much the same.

    Here’s an stackblitz based on the example from the official docs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search