2

I need to set the width of a mat-option to the same value as the mat-select. The problem is that the cdk-overlay-pane adds a style with a transform: translateX(-16px).

I can remove that by SCSS but I need to know if there are other options to do this.

I've tried overwriting the SELECT_PANEL_INDENT_PADDING_X, but with no success

<mat-form-field [class.mat-form-field-invalid]="hasError">
  <mat-select
    [placeholder]="placeholder"
    [formControlName]="inputId"
    disableOptionCentering
    panelClass="join-panel-alligment"
  >
    <mat-option
      *ngFor="let item of question.answerPossibilityList"
      [id]="question.id + '_so_' + item.id"
      [value]="item"
    >
      {{ item.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

Expected result: https://i.stack.imgur.com/Y4Geu.jpg

Edric
  • 24,639
  • 13
  • 81
  • 91
Bitzu
  • 125
  • 2
  • 11
  • couldn't find anyone who got this working.. .https://stackoverflow.com/questions/52962476/in-angular7-how-do-i-change-the-height-of-a-mat-select-when-shows-the-list-of-i – Akber Iqbal Jun 12 '19 at 07:26
  • `.cdk-overlay-pane { transform: unset !important; .mat-select-panel { min-width: 100% !important; } }` this is the ugly solution – Bitzu Jun 12 '19 at 08:24
  • ugly or not, CSS maybe the only solution... unable to change the `const SELECT_PANEL_INDENT_PADDING_X` and like majority of angular material components, the documentation sucks :( – Akber Iqbal Jun 12 '19 at 08:47
  • the real question is why they thought it was a good idea to use transform x instead of just using a negative margin? What was the thought process... – Collin May 24 '22 at 18:55
  • Adding this to my styles.scss does the trick (could also do ng-deep I guess). Screen resolution independent fix`.cdk-overlay-pane { transform: unset !important; margin-left: calc(-12px - .15vw) !important; .mat-select-panel { min-width: calc(100% + (24px + .3vw)) !important; } } .cdk-overlay-container { position: fixed; z-index: 1000; }` – Collin May 24 '22 at 19:12

0 Answers0