Angular material Select option width?

1
votes

I have a form with an Angular Material Select input:

<div class="form-group" formGroupName="x" id="x">
    <mat-select class="form-control" [formControl]="xx" id="xx" >
        <mat-option *ngFor="let zof xxx" [value]="z.Key">
            {{z.Value}}
        </mat-option>
    </mat-select>
</div>

The option value is a pretty long string and it does not fit in the view as you can see:

enter image description here

Any of these solutions would solve my problem:

  • Set options width fit values

  • With mouse hover, see the full text as tooltip

  • Set horizontal scroll (As last option)

Is there any solution for this problem?

Thanks in advance.

1
cssangularselectangular-material

1 Answers

1
votes

You can use matTooltip from Angular- Material.

Check out the link below - https://material.angular.io/components/tooltip/overview