MatSelect: Long options are truncated

[jermowery]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Options should wrap or be shown in some way that does not hide the option text from the user.

What is the current behavior?

Long option text is truncated.

What are the steps to reproduce?

http://plnkr.co/edit/X8JZAatPpRD6RBSRgT7K?p=preview

What is the use-case or motivation for changing an existing behavior?

Text can be long in options, the user should not have the option text hidden from them.
For translated text that is longer than the source text this can happen more frequently.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest

Is there anything else we should know?

[fxck]

related #3883

[dixy]

In a select in multiple selection mode, the option text is entirely hidden for long options on at least Firefox and IE 11.

Firefox 56

Chrome 61 is almost good (two dots hidden)

[crisbeto]

That is a separate issue from the one being discussed here @dixy, but thanks for the report. It should be fixed by #7857.

[UncleJimmy]

I want to add a tooltip on this "mat-option-text" as workaround, is there any way we could know the text is truncated or not?

[Hydhen]

@UncleJimmy I've seen this workaround :

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

From this link

But I didn't succeeded on getting the propeties from an element node, i'm stuck to this point :

@ViewChild('select') select: MatSelect;
this.select.options.forEach((option: MatOption) => {
     console.log(option._getHostElement().childNodes[1]); // Gives the span element
});

[Hydhen]

Just find out you can do this :

<mat-option *ngFor="let obj of objs" [value]="obj.Code" matTooltip="{{ obj.Value }}"
      matTooltipPosition="before" matTooltipDisabled="{{ obj.Value.length < 25 }}">
      {{ obj.Value }}
</mat-option>

It works well, but it evaluates according to the number of caracters and not if the text is ellipsed or not

[jelbourn]

The MDC-based version of MatSelect wraps option text:
https://stackblitz.com/edit/angular-mdc-issue-md2tzg?file=src%2Fapp%2Fexample-component.html

This is in material-experimental now and will eventually replace the existing MatSelect

[adityakmehta]

Hi.. was anyone able to find solution to Resizing the mat-option with height and line-height for the mat-autocomplete alters the autocomplete keyboard scrolling #10038 ?

[oleg-golota]

I also need this bug #10038 to be fixed. I wonder why it was closed?

[Totati]

It was marked as duplicate.

[amysorto]

Text wraps instead of truncating in the MDC based select component coming soon in v15, I am closing this bug.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}