Improve slide-toggle text label

[ocarreterom]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

The text of the slide-toggle should wrap or be ellipsed like md-checkbox.

What is the current behavior?

The label push de content out of its parent.

What are the steps to reproduce?

Demo: http://plnkr.co/edit/MZ3fzeJKCyBvGIBphl2P?p=preview

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

angular/material: 2.0.0-beta.6-0aaeb69

Is there anything else we should know?

¿Remove white-space: nowrap?

[devversion]

I think there was a reason why we didn't do that. I will try to figure out why.

[devversion]

The reason I didn't add the text ellipsis to the slide-toggle was that the label of the slide-toggle does have a dynamic width (and therefore the ellipsis couldn't work properly)

There are workarounds for flexbox containers to properly show a text ellipsis.

.mat-slide-toggle-label {
  flex: 1;

  * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@jelbourn Do you think we should do something like that? I feel like it's not good to reach out of the components view (with the CSS selector)

[jelbourn]

Why does it have a dynamic width?

[devversion]

Because the slide-toggle adjusts its with depending on the content (specified from the user)

This seems to be an issue with FlexBox elements (while it works with inline block for example)

[benelliott]

Seems that as of PR #6674 this is the intended behaviour for both mat-checkbox and mat-slide-toggle. Is there an "official" way to enable text wrapping or ellipsising for these components other than overriding the CSS to remove white-space: nowrap?

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