adding style to mat-option of mat-autocomplete

user_9311179 0
Viewed 1490

I have this HTML code here

<div style="width: 150px">
  <form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>
</div>

The default behaviour of mat-option is using


  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis

  1. I want to break the long sentence into next line rather than using ... . The styling wont work :(

  2. I also need to override the font which I tried also using below code, but it wont override

mat-option {
    font-family: "Times New Roman", Times, serif; // does not work
  }

styling here

Please help.

angular-material angular sass css html
2 Answers

You can add this to your CSS:

.mat-option{
  word-wrap:break-word !important;
  white-space:normal !important;
  font-family: "Times New Roman", Times, serif;
}

.mat-option-text{
  line-height:initial !important;
}
user_113941980

The reason why your stlying does not work is because the actual options are shown in a overlay which is placed in the <body>. Therefore the selector component mat-option cannot work, because the options are not placed in the component.

To override any styles that are in the mat-option you better address the class .mat-option and place it into the global styles.scss

.mat-option {
   font-family: "Times New Roman", Times, serif; // 
}
user_19560720
Related