angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

Select option should be able to display fully (with line break) #9310

Closed kblestarge closed 6 years ago

kblestarge commented 6 years ago

Feature request (or help with custom CSS)

What is the expected behavior?

I want the text in the option of the select to be able to break to the next line instead of being hidden with three dots at the end of a single line.

What is the current behavior?

A combination of overflow: hidden; and text-overflow: ellipsis; is preventing a really long option from being fully displayed. It is limited to one single line with three dots (...) at the end when it is too long.

What are the steps to reproduce?

http://plnkr.co/edit/1H1D9A?p=preview click on the color select element to see the options box popup.

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

When the option text is important to see in it's entirety, I want the user to be able to see it in it's entirety.

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

Angular CLI: 1.6.0 Angular: 5.1.1 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, platform-server, router @angular/cdk: 5.0.0-rc0 @angular/cli: 1.6.0 @angular/material: 5.0.0-rc0

crisbeto commented 6 years ago

Closing as a dupe of https://github.com/angular/material2/issues/7211.

angular-automatic-lock-bot[bot] commented 5 years ago

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.