Components: In beta.11 and 12, long text in md-checkbox or mat-checkbox cannot be styled to wrap

[mLaird]

Bug, feature request, or proposal:

Bug, beta.10 wrapped the same text

What is the expected behavior?

Long text between the md-checkbox tags should style via CSS and/or angular/flex-layout to a specified width and wrap within it

What is the current behavior?

Long text run across the page and "outside the browser"

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/DlHd6U

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

Put a 200 character text string inside your md-checkbox tags in your material.angular.io/components/checkbox/examples

Here is my code that spreads out beyond the browser, i.e. it displays as one line and not all of it shows:

    <div fxLayout="row" fxFlex class="w800px">
    <md-checkbox id="userAgreesTOS" name="userAgreesTOS" aria-labelledby="userAgreesTOS" formControlName="userAgreesTOS"
    i18n="user agrees to terms of service">By checking this box, I agree with the <a href="termsOfService.php"><span class="required">Terms of Service</span></a>
    that, in summary, say I  am responsible for all content of this posting, and I grant limited rights for display, data analysis and the
    use of cookies to make your future use of this service more automated.
    </md-checkbox>
    </div>

.w800px{
min-width: 400px;
max-width: 800px;
width:100%;
}

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

Text should wrap, and fit inside divs set by CSS

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

Angular 4.4.3
MD-beta.11
Windows 10

Is there anything else we should know?

I use Angular Flex-layout

[josephperrott]

Can you provide a reproduction stackblitz/plunker? I was not able to see this same issue myself.

[mLaird]

@josephperrott Sure, would you give me a link to a plnkr that is set up
for MD.

On Fri, Oct 6, 2017 at 7:02 PM, Joey Perrott [e-mail]
wrote:

Can you provide a reproduction stackblitz/plunker? I was not able to see
this same issue myself.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/7480#issuecomment-334889382,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADDSb1lvLPu3sqYQueCPgjTEkGX1KYscks5sprF0gaJpZM4PrKQM
.

--

Mike Laird

12 Arbor Creek Drive, Pittsford, New York 14534
[email protected]

". . . remembering on both sides that civility is not a sign of weakness,
and sincerity is always subject to proof. Let us never negotiate out of
fear, but let us never fear to negotiate." - John F. Kennedy

[mLaird]

@josephperrott Here is a plnkr. I think it has all the relevant code. I tried.

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

[mLaird]

@josephperrott I completed the upgrade to beta.12 and the problem persists. My other MD components work well, thank you.

I copied the checkbox from the MD checkbox documentation, upgraded it to mat-checkbox, added a lot of text, styled it as shown above, placed it inside my reactive form and outside my form - and the long text spreads out across the page and 'outside' the browser (if it could be seen) in all locations/instances.

I'm surprised you cannot reproduce the problem. Try the above. Or show me a working plnkr with the long text wrapped.

[taokakao]

Confirming, having same issue. Mat-checkbox gets out of mat-card or any other container ignoring width.

[jayoma]

I may be over-simplifying this.. but the following works for me:

.mat-checkbox-label { white-space: normal; }

[mLaird]

@jasonhendee , Thanks, but it does not work for me. Even if it did, it should not be necessary to specifically set white-space in order to get the text between tags to behave properly, i.e., respond to width

[Noah-T]

I am also having this issue

[garkuwa]

@jasonhendee thank you, it works

[jelbourn]

Closing since this is working as intended; the intent is that checkbox labels do not wrap by default and can be overridden via css.

[angular-automatic-lock-bot[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._}