Mat-select panel min-width

Question

I'm trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below:

and I don't know where its calculating this min-width. also I tried to add panelClass and override the min-width from this class, for example:

<mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple>      

&.multiple-panel {
   min-width: 200px !important;
}

but when opening the dropdown its open with the original width (like in the pic) and after few millisecond"jump" to the custom min-width defined on the panel class.

I find the mat-select very hard to style. anybody knows how to solve this problem?

Solution 1

You can style your mat-select dialog box by giving a panel class (as you mentioned).
Please follow this demo : https://stackblitz.com/edit/angular-matselect-style?file=src/styles.css
to see the styled mat-select components.

Reason :

• Reason for the delay is that angular for dialog-boxes, create a cdk-overlay-pane inside the cdk-overlay-container container, So in case of mat-select it provides a min-width of 180px, which is overridden by our panel class in the slight delay.
• Yes, there is a slight delay in opening of dialog box and customizing its width to the specified width provided in the panel class. But the delay is acceptable in the project that i was working on.
  So, you can find the demo for styling the mat-select component, as i have provided 2 components and you can modify any css properties.
• Try to use styles using ::ng-deep or :host >>>, if not finding any luck,
  please paste the styles in style.css.

Update 1 :
Tried css animations, and opacity for making smooth opening of the mat-select options.

.panel-class-applied-on-mat-select {
  animation-name: opacityDelay !important;
  animation-duration: 0.3s !important;
}

@keyframes opacityDelay {
   0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1;}
}

Updated StackBlitz Demo

Solution 2

I used another approach. Just added this piece of code to global style.

.mat-select-panel {
// some your code
  &.ng-animating {
       visibility: hidden;
    }
  }

You can try this solution on DEMO StackBlitz.
Hack with opacity did not fix jumping width when select is closing.

Solution 3

You'll need to change viewEncapsulation to none at your component decorator.and then add following css to remove the transition effect.Have a look at viewencapsulation in angular docs https://angular.io/guide/component-styles#view-encapsulation.

@Component({
selector: 'app-selector',
templateUrl: './template.html',
styleUrls: ['./template.css'],
encapsulation: ViewEncapsulation.None
})
//CSS
.cdk-overlay-connected-position-bounding-box .cdk-overlay-pane .mat-select-panel.ng-animating {
display: none;
}

Comments

[cheesydoritosandkale]

Hmmm... it is not acceptable for my project. It sucks there isn't a better solution.

[Abhishek Kumar]

@cheesydoritosandkale see the updated answer, if its helpful because the opening is delayed and made smooth, and mat-select options are now opening correctly to the expected width.

[Tomer Aronovsky]

@AbhishekKumar Amazing idea. work for me. but you support opening the panel only. on close its get bigger again for a second, how do you recommend to add the delay when closing the panel?

[Tomer Aronovsky]

@AbhishekKumar ?

[Abhishek Kumar]

@TomerAronovsky my answer supports opening of panel as i have applied animation with the panelClass provided, because on closing panelClass animation will not work. The animation will work correctly if on opening the panel a class should be added with animation property, and on closing that class should be removed. In this case animation will work perfectly fine. So i tried the open and close events, also some other events given on the official docs of mat-select but was no luck getting handlers on opening and closing of mat-select.

[Abhishek Kumar]

@TomerAronovsky sorry for not replying earlier as i forgot to reply on this thread after trying to implement opening and closing events on the mat-select.

[cheesydoritosandkale]

I will have to try your solution. I ended up fixing it by just adding .mat-select-panel { margin-right: -32px; } Which works pretty well.

[Harshad Vekariya]

Can you please add more detail or working sample on stackblitz.com.

[shutsman]

Great! It is work. <mat-select panelClass="triageListOptions" .triageListOptions.ng-animating { visibility: hidden; }