Mat-select panel min-width

mat-select dynamic width
mat-select-panel position
mat-select id
mat select change observable
mat-select height
how to resize mat select
mat select with size
mat-select-arrow css

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?

Cannot adjust the min-width of MatSelect select panel · Issue , When trying to adjust min-width property of the select panel, it should be overriden properly for customization purposes: .mat-select-panel  the issue arises from an inline css-property that is set on the .mat-select-panel element: min-width: calc(100% + 32px); Changing this in the developer tools to calc(100%) or 100% or removing it results in the correct width of the panel, except for 32px missing: 👍

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.

IE11: Width of select Panel is too low · Issue #11609 · angular , the issue arises from an inline css-property that is set on the .mat-select-panel element: min-width: calc(100% + 32px);. image. Changing this in  Also there are cases when we need kind of "small" selects, but it's impossible to have it due to min-width property set to '112px', on the '.mat-select-trigger' element johnpaulmanoza commented Jul 13, 2017 Solved this by adding this to my theme.scss or any global css.mat-select-trigger { min-width: 30px !important; }

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

angular-material-select-custom-options, Dynamic content for Angular Material select options. /deep/ .mat-select-panel,. // /deep/ .cdk-overlay-pane {. // min-width: auto !important;. //}. I am trying to reduce the default size of mat-select drop-down panel, But unable to figure out how to do it . I have tried giving width , have tried overriding panel class in angular mat-select, But the size doesn't seem to go down. My Template File

Try this way : define a panel class for your mat-select in the code and then in the global/app styling file just add:

.panel-class-name .mat-select-panel {
 // add your styling here
}

It worked for me to add some component specific styling for material components.

angular-matselect-style-min-width-opacity-hack, I previously had a simple jQuery selection box, that had one width for the increase the panel size : .mat-select-panel { width: 200% !important; min-width: 200%  Angular Material uses mat-select-content as class name for the select list content. For its styling I would suggest four options. 1. Use ::ng-deep:. Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views.

Is it possible for an Angular 2 mat-select to have a different mat , style="padding: 7px"> <div> <mat-form-field> <mat-select [(ngModel)]="value" placeholder="choose value" style="min-width:200px;"> <mat-option *ngFor="let  However, IE would still get it wrong, now the panel being too large because the max-width: 280px of .mat-select-panel is ignored: Hence I think the solution of having a .mat-select-panel-wrap with flex-basis: 100%; fixes the problem properly, so this PR should be good to go .

material mat-select, I am trying to reduce the default size of mat-select drop-down panel, column; justify-content: space-between; min-width: 350px !important; }. It appears that the test was failing, because IE does a slight twitch on the select panel since it goes from a pixel-based `min-width` to one with `calc` and percentages to just percentages. I've set the default width to 100% which is the same as the pixel-based one, which appears to make IE happy.

Select, <mat-select> is a form control for selecting a value from a set of options, similar to which can be used to apply additional CSS classes to the dropdown panel. Depending on the browser the panel can get rendered as div or span. Your css would work for div but the spans default feature would override the css.

Comments
  • I am having this same issue!
  • Hmmm... it is not acceptable for my project. It sucks there isn't a better solution.
  • @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.
  • @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?
  • @AbhishekKumar ?
  • @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.
  • Can you please add more detail or working sample on stackblitz.com.
  • Great! It is work. <mat-select panelClass="triageListOptions" .triageListOptions.ng-animating { visibility: hidden; }