extra 'span' element added in mat-option of autocomplete makes impossible to style the internals

[k-krupka]

Bug, feature request, or proposal:

I would consider it a bug unless told otherwise.

What is the expected behavior?

Extra span element is not added, in my opinion - not needed.

What is the current behavior?

Additional element is added to the form, making it impossible to style the internals.

What are the steps to reproduce?

1. http://plnkr.co/edit/dKYBn6NFpMbknwKbVfgP?p=preview
2. hit F12
3. hoover over the mat-option

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

styling of the internals is very hard becuase of the extra span which is added

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

Angular 5.0.0-rc0-40d6bcb
the rest as per plunk example

Is there anything else we should know?

Nope, that's it.

[crisbeto]

That span is there to collapse some whitespace, as well as truncate long labels (once #7857 gets in). Note that the text isn't the only content that can be put inside an option, there's also a checkbox that will be shown if the select is in multiple mode.

[jelbourn]

Closing as "working as intended". You can always target descendants with css

[k-krupka]

yep, understood.
cheers guys!

[prashantpimpale93]

@jelbourn I need the option text to appear to the next line after the text overflow from the min-width.

What I did:

.mat-autocomplete-panel mat-option.mat-option {
  height: unset;
}

.mat-option-text.mat-option-text {
  white-space: normal;
}

But not working!

Can you suggest something?

[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.}