Angular material : override css table inside a mat-menu

Question

I'm working on an application in Angular 7 and Angular Material cdk 6. It's my first time with Angular Material. I have to override the css of my columns. None of my tries have worked.

* HTML *

<mat-menu #myMenu>
<ng-template myContentMenu>
    <table mat-table>
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef >Date</th>
            <td mat-cell *matCellDef="let item" >{{ item.date }}</td>
        </ng-container>
    </table>
</ng-template>

I don't know how to put padding, I've tried encapsulation: ViewEncapsulation.None in the .ts file and :

* CSS *

:host { /** With and without host */
   th.mat-column-date, td.mat-column-date {
      padding-left: 20px; /** With and without !important */
   }

   ::ng-deep mat-menu th.mat-column-date,
   ::ng-deep mat-menu td.mat-column-date {
     padding-left: 20px !important;
   }}

I don't know how to proceed. Does somebody have an idea ?

does it work when you add your css rules to your global css file? — Arikael
– Arikael, Commented Nov 5, 2019 at 10:34
@Arikael no, I'm not able to target the right tag. I'm very bad in CSS. Obviously, css inline in HTML works, but I would prefer to commit something less dirty :') — Neamesis
– Neamesis, Commented Nov 5, 2019 at 10:40
remove your :host declaration and add only our padding rules to your global style or to the style sheet which belongs to the component containing your table. Like -> stackblitz.com/edit/angular-pqd4qz The symbol column has a padding — Arikael
– Arikael, Commented Nov 5, 2019 at 10:53

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Why dont you just add your own class to the desired element. For example, I have added "col-padding" class to the th element.

HTML

<th mat-header-cell *matHeaderCellDef class="col-padding">Date</th>

CSS

.col-padding {
    padding-left: 20px; 
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 5, 2019 at 12:24

sosNiLa

3371 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular material : override css table inside a mat-menu

1 Answer 1

HTML

CSS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Related