I have a mat-table with select elements in the header row that allow filtering of the rows displayed below. When I click on a select, a small popup window appears (as shown in the images). Unfortunately, this popup is too narrow. If I make the underlying mat-select wider, all the columns become too wide because they are stretched by the select.
How can I make only this select popup wider, without affecting the actual mat-select element itself?
I use Angular 15.2.1
what it would look like, if I gave every select an specific width
My html:
<table mat-table [dataSource]="dataSource" matSort>
<mat-sort-header *matHeaderCellDef mat-sort-header>Name</mat-sort-header>
<ng-container *ngFor="let col of tableData.columns" [matColumnDef]="col.field">
<ng-container *ngIf="tableData">
<th mat-header-cell class="headerCell" *matHeaderCellDef mat-sort-header>
<div class="columnHeader">
<mat-select class="filterSelect" [(value)]="selectedValues[col.field]" multiple placeholder="Filter"
(selectionChange)="applyColumnFilter(col.field)">
<mat-option *ngFor="let uniqueValue of getUniqueValues(col.field)" [value]="uniqueValue">{{uniqueValue}}
<span
*ngIf="getCountAndCheck(col.field, uniqueValue) != 0">({{getCountAndCheck(col.field, uniqueValue)}})
</span>
</mat-option>
</mat-select>
<!---<mat-icon class="mat-select-icon">filter_list</mat-icon>--->
<div class="columnTitle">{{col.header}}</div>
</div>
</th>
<td mat-cell> ... </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">Kein Ergebnis gefunden. "{{input.value}}"</td>
</tr>
</table>
my css (or some of it that might be relevant):
th.headerCell div{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding:0;
margin:0;
}
.tableContainer {
width: 1632px;
max-height: 500px;
overflow: auto;
}
table {
height: min-content;
}
div.columnHeader {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding:0;
margin:0;
row-gap: 15px;
justify-content: left;
}
div.columnTitle {
justify-content: left;
text-align: left;
}
.filterSelect {
/*width: 250px;*/
text-align: left;
}
I’ve tried adjusting the width of the mat-select element, but it affects all the columns. I expected only the select popup to be wider without impacting the overall layout.
mat-select (when using Angular Material v15) has an @input binding for panelClass
which allows you pass a class and therefore style the pop-up panel independently of the select input.
https://v15.material.angular.io/components/select/api
EDIT: added simple example
<mat-select [panelClass]="'my-panel-class'">
...
</mat-select>
// styles.scss
.mat-mdc-select-panel.my-panel-class {
min-width: 256px;
}