help(MatSelect): MatSelect .cdk-overlay-pane fixed width with Angular Material 15

[Raphyyy]

What are you trying to do?

I am trying to migrate a large app using Angular Material to v15 and like many of us I have to overwrite some default styles on Angular Material components.

I am facing an issue with the new MatSelect v15. It seems that now the default behavior is to make the overlay-pane use the exact same width as its mat-select related component, directly by setting the width to the element (.cdk-overlay-pane) styles.
If the mat-form-field or mat-select have a small width, the mat-option texts get word wrapped and it is pretty ugly :

https://stackblitz.com/edit/angular-sbq67h?file=src/app/select-overview-example.html

Is there any way I could prevent this fixed width on the related .cdk-overlay-pane for my mat-select component ?

What troubleshooting steps have you tried?

Adding white-space: nowrap; to .mat-mdc-option .mdc-list-item__primary-text prevent the wrapping issue but the .cdk-overlay-pane fixed width do not allow any overflow. The @input panelClass can't help because .cdk-overlay-pane is a parent.

Reproduction

Steps to reproduce:

1. https://stackblitz.com/edit/angular-sbq67h?file=src/app/select-overview-example.html

Environment

• Angular: 15.0.4
• CDK/Material: 15.0.4
• Browser(s): Google Chrome v108
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[tarn2206]

I have same problem and this is my css override solution

.cdk-overlay-pane:has(.mat-mdc-select-panel) {
    width: auto !important;
}

It's work like previous version of matSelect except when the matSelect width is longer than an options, the panel width wouldn't expand to the matSelect width.

[Raphyyy]

@tarn2206 good solution but the :has selector is still an experimental selector and it is not fully implemented in all browsers (e.g Firefox) https://caniuse.com/css-has

[EliseoPlunker]

One provisional solution can give value to the property "_overlayPanelClass" and then use

.width-auto
{
   width:auto;!important
}

You can make using a ViewChild

  @ViewChild('select',{static:true}) select:MatSelect
  ngOnInit()
  {
    this.select._overlayPanelClass="width-auto"
  }

Or even, you create a directive

@Directive({
  selector: 'mat-select [auto]'
})
export class SelectWidthAutoDirective {
  @Input('auto') set _(value:string)
  {
    this.matselect._overlayPanelClass=value
  }
  constructor(private matselect:MatSelect){}
}

And use like

 <mat-select auto="width-auto">
   ...
</mat-select>

See stackblitz

[SonicReal]

Thank you for the directive, however, there is a case when the input becomes wider then values, so the dropdown's width becomes smaller than host element. Can we achieve min-width = mat-select width?

edit*

I've achieved this using this, but since minWith is being applied right after "open", it looks not smooth

@Directive({
  selector: 'mat-select [autoWidth]'
})
export class MatSelectAutoWidthDirective {
  constructor(private matselect: MatSelect,
              @Optional()private matFormField:MatFormField) {
    this.matselect._overlayPanelClass = 'width-auto'
    this.matselect.openedChange
         .subscribe(()=>{
      if(matselect.panel && this.matFormField) {
        this.matselect.panel.nativeElement.style.minWidth = this.matFormField._elementRef.nativeElement.offsetWidth + 'px';
      }
    })
  }
}
`

[GabrielBB]

@EliseoPlunker @SonicReal Angular team gave us a way to override this

1 - Create CSS Class:

.expandable-overlay-panel
{
   width:auto; !important
}

2 - Put this on top of your component:

providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'expandable-overlay-panel' }
    }
  ],

I believe, for now, this is the best solution. To be honest, I would have preferred overlayPanelClass to be an @Input() in MatSelect . Or even better: @Input() expandablePanel: boolean = false in MatSelect

[bdirito]

A slight improvment on @GabrielBB's approach would be to use min-width over width.

The advantage is if you have no long options in your list your options will still extend to the minimum of the trigger label. It is particularly helpful in cases where options are dynamically being generated. It also allows for the removal of the !important.

.expandable-overlay-panel
{
   min-width: min-content;
}

providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'expandable-overlay-panel' }
    }
  ],

[crisbeto]

Duplicate of #26000.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}