How to Adjust Width of Mat-Select Popup Without Affecting Mat-Select Element?

Question

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 looks like now

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.

Answer 1

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;
}