Angular material mat-menu text does not fit

3
votes

I am using the mat-menu component from angular material. However, the content does not fit in to the menu. I don't want to use mat-select, because i want to show a button with a different value than the values in the dropdown.

Now my question is, how can I show the full text in the menu? With any kind of multi line or tooltip?

   <button mat-button [matMenuTriggerFor]="menu">{{row.menuShortText}}</button>
   <mat-menu #menu="matMenu">
      <span mat-menu-item>This is a very long text that does not fit</span>
      <span mat-menu-item>this fits</span>
      <span mat-menu-item>this fits</span>
      <span mat-menu-item>this fits</span>
      <span mat-menu-item>this fits</span>
   </mat-menu>

enter image description here

1
angularangular-material

1 Answers

0
votes

If a tooltip is ok you can add it to the span:

<button mat-button [matMenuTriggerFor]="menu">menu</button>
<mat-menu #menu="matMenu">
  <span mat-menu-item matTooltip="This is a very long text that does not fit">
    This is a very long text that does not fit</span>
  <span mat-menu-item>this fits</span>
  ...
</mat-menu>

don't forget to import MatTooltipModule