Select option with long name

[erperejildo]

Showing it from the list looks fine, but when selected, it should be displayed in one line with ellipsis:

https://stackblitz.com/edit/angular-mlpvewhq?file=src%2Fapp%2Fapp.component.ts

[waterplea]

It's up to you how you style your template. Add white-space: nowrap and text-overflow: ellipsis, add wrapping tags if necessary.

[erperejildo]

That's what I tried first, but .t-template is a position: absolute element and it doesn't work without extra changes. I think we should have a property here to force this showing within one line (and by default, because probably it's the most common case)

[waterplea]

Like I said, add a wrapper around the text part (because ellipsis will not show otherwise due to display: flex on parent):

[waterplea]

As for default - by default there is no template and it is shown in an input tag:

You cannot have ellipsis by default in an input tag because otherwise you would get this if somebody scrolls it horizontally using touchpad:

[erperejildo]

ah ok, the problem was just with that example (the one I ended up using in my project). Checking this other one, by default does it correctly (I don't care about the ellipsis)