Mat-Card in Mat-Table does not take up full width with overflow: x

user_10114552 0
Viewed 1585

I have inserted a mat-card in mat-table and set the width to width: 100%. But when i scroll with overflow: x from left to right not the whole wrapper is filled with the mat-card. Do you have an idea what I have to optimize in CSS?

My Code:

// HTML
<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">...</table>
    <mat-card class="change-width"></mat-card>
</div>

// CSS
.app-table-wrapper {
  position: relative;
  background-color: #fbf9f9;
  min-width: 200px;
  overflow: auto;
  padding: 0;
  height: 300px;
}

.change-width {
  width: 100%;
}

My Work: https://stackblitz.com/edit/angular-sticky-table-a818pn?file=src%2Fapp%2Ftable%2Ftable.component.html

mat-table angular-material angular css
2 Answers

I think there can be another way. You could just wait till the table gets loaded and then render your mat-card so that it can get the whole width as per the table's width.

For that you can use the variable for binding it with *ngIf in the mat-card tag.

user_136138240

I had a somewhat related issue where my table wouldn't fill my entire dialog box. In my case, I was able to get this working by putting the following in my SCSS file:

mat-table
{
    width: 100% !important;
}

and the following in my template:

<mat-table [dataSource]="alertCounts">
...
</mat-table>
user_40327030
Related