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?
Best Answer
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 :
cdk-overlay-pane
inside thecdk-overlay-container
container, So in case ofmat-select
it provides a min-width of 180px, which is overridden by our panel class in the slight delay.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.::ng-deep
or:host >>>
, if not finding any luck,please paste the styles in
style.css
.Update 1 :
Tried
css animations
, andopacity
for making smooth opening of themat-select
options.Updated StackBlitz Demo