Is it possible for an Angular 2 mat-select to have a different mat-select box width than the mat-select-panel?

0
votes

I am having trouble with the material mat-select initial selection box for the "drop-down" menu's width being the same size as the options in the mat-select-panel. I previously had a simple jQuery selection box, that had one width for the placeholder and a separate width for the selections/options. It seemed to do this automagically. I am now having trouble with Angular 6 material selection to have the different widths. It took me forever to find out how to change the widths in the first place. I finally changed it by using

Angular HTML:

<div id="selectionList">
  <mat-form-field>
    <mat select [ngclass]="{'selection-box-width' : true }" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
    Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

and SCSS of

.selection-box-width {
    min-width: 512px;
    max-width: none;
}

The selection box (mat-select) always has the same width as the popup higher z-index (mat-select-panel). Should there be a way to change the widths and have them different?

2
angularsassangular-materialhtml-select

2 Answers

1
votes

I step back as to who answered this question. It was both of you, for me to get a better understanding of the concept. I found out there was a little bit of CSS I needed though. My code is as follows:

<div id="selectionList">
  <mat-form-field>
    <mat select panelClass="panel-selection-width" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
        Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

and, in the styles.scss, a SCSS of:

.panel-selection-width {
  max-width: none !important;
}

the !important is definitely needed, but the [ngclass]="{'selection-box-width' : true }" was not needed. I did need this in the SCSS of the component:

#selectionList > .mat-form-field {
    min-width:250px;
}

But it works now!

Thanks

0
votes

You would need to style both. Styling for the panel needs to be applied via the panelClass option. Using ngClass will apply style to the select input, but not the panel.

<mat-select 
    [ngclass]="{'selection-box-width' : true }" 
    panelClass="selection-panel-width" 
    ...

For the panel, you will probably have to use !important with the max-width setting and possibly others, and the class need to be a global class, not part of your component.