Components: Checkboxes with long labels

[nkholski]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

Checkboxes with long labels won't word wrap (as it did in earlier versions). (see bottom part of attacjed image)

What is the current behavior?

The labels of checkboxes will overflow the containing element. (see top part of attached image) The problem appeared when I upgraded to Angular 5 from 4-something and I pushed up material at the same time. It's possible this behavior was introduced in an earlier version of material than the latest.

What are the steps to reproduce?

Just make a checkbox with a long label inside a card or something.

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

I have a checkbox on a login-page with a long text-string about the user agreeing on this and that. When wrapped it's about three lines with the checkbox vertically aligned on the left side.

Is there anything else we should know?

I solved it locally by altering _checkbox-theme.scss from line 88:

@mixin mat-checkbox-typography($config) {
  .mat-checkbox {
    font-family: mat-font-family($config);
  }
  .mat-checkbox-label { // NEW
    white-space: initial; // NEW
  } // NEW
  // TODO(kara): Remove this style when fixing vertical baseline
  .mat-checkbox-layout .mat-checkbox-label {
    line-height: mat-line-height($config, body-2);
  }
}

[jelbourn]

This is currently working as intended, but perhaps something could be improved in the docs to make this easier for people so that there's a supported path.

[nkholski]

I couldn't find a way to alter my app's css-files to achieve what I want, only by altering the css in the material-module in node_modules. It fails even with "!important". Any hints?

May I ask why this behavior is intended? I can't think of a case when you would prefer the label to overflow a container element rather than add line breaks.

[bandman0226]

I was having the same issue when trying to add a confirmation checkbox at the bottom of a from on a mobile view. We were able to get around it using this in our theme:

.mat-checkbox-layout { white-space: normal !important; }

[egavard]

Fixed by setting the mat-checkbox-layout white-space to normal before mat-core() mixin.
This fix is applied in my project style file styles.scss. This file is mentionned in .angular-cli.json file, in styles property array.

@import '~@angular/material/theming';
.mat-checkbox-layout {
  white-space: normal !important;
}
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

EDIT: Added details about location of this fix

[richardsengers]

I think the answer of @egavard should be the default setting for a checkbox. I can't think of a case when you would want a checkbox label to overflow it's container

[hoangnguyen208]

I still can't override the class .mat-checkbox-layout. I tried all solutions above and other approaches such as including /deep/ in css file or ViewEncapsulation, but that class is still white-space: nowrap. I use Angular 5 and the latest version of this library.

[jakkn]

@hoangnguyen208 the workaround described above should work as long as you follow https://material.angular.io/guide/theming for creating an app theme. Make sure the workaround css comes before @include mat-core();

[marcinkunert]

I've added /deep/ and it started to work for me

/deep/ .mat-checkbox-layout {
  white-space: normal !important;
}

[cnd5041]

This seems to be a reoccurring discrepancy with how angular-material and react-material handle wrapping/scaling. React wraps and scales, angular runs off the page/component. Seems like having it auto-wrap and scale would be much more intuitive/preferable.

Same core issue: https://github.com/angular/material2/issues/10744, https://github.com/angular/material2/issues/10954

[kleinph]

Is it somehow possible to align the checkbox with the first line of text?

[antoinebrault]

This is currently working as intended, but perhaps something could be improved in the docs to make this easier for people so that there's a supported path.

Can you enlighten us @jelbourn. Why is this intended ?

[hisham]

+1. Any update on this issue?

[Tommatheussen]

Is it somehow possible to align the checkbox with the first line of text?

What worked for me, is to set the margin-top property manually:

I've checked at the margin from other checkboxes with 1 line, and for me the value of 4px seems to be correct.

[tsiegleauq]

Thank you all for the information. Here is what I ended up doing to provide usable multi-line-mat-checkboxes in the latest version of Angular using scss

// adds breaks to the mat-checkboxes with long labels
::ng-deep .mat-checkbox-layout {
    white-space: normal !important;
}

// rather than center the checkbox, put the checkbox in the first line
::ng-deep .mat-checkbox-inner-container {
    margin-top: 3px !important;
}

[spock123]

@tsiegleauq isn't ::ng-deep deprecated? Maybe I*m wrong

[tsiegleauq]

@spock123 from angular fundamentals:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

There currently is no alternative to shadow-piercing. Until they provide one, I continue to use ::ng-deep

[ricardosaracino]

white-space: normal !important; isnt working in IE.. but display: inline-flex; seems to be the culprit.. what is one more ie hack anyways 😒

[ricardosaracino]

Thank you all for the information. Here is what I ended up doing to provide usable multi-line-mat-checkboxes in the latest version of Angular using scss

// adds breaks to the mat-checkboxes with long labels
::ng-deep .mat-checkbox-layout {
    white-space: normal !important;
}

// rather than center the checkbox, put the checkbox in the first line
::ng-deep .mat-checkbox-inner-container {
    margin-top: 3px !important;
}

i just added this to a top level css file src/styles/material.css

/** wrap label */
.mat-checkbox-layout {
  white-space: normal !important;
}

/** keep checkbox on first line */
.mat-checkbox-inner-container {
  margin-top: 4px !important;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /** wrap label ie */
  .mat-checkbox-layout {
    display: block !important;
  }

  .mat-checkbox-inner-container {
    margin-top: 0 !important;
  }
}

[bene-starzengruber]

Is there an official way to ellipse the text if there is not enough space?

Afaik, it's only possible by overriding multiple styles (including some !important) - which feels very "dirty" for a common use-case like this.

Considering the previous requests for a multi-line label, I would really love to see an option where I can select the "wrapping-strategy" like ['line', 'ellipsed-line', 'multiple-lines'] or so 😃

[padma2019]

Thank you all for the information. Here is what I ended up doing to provide usable multi-line-mat-checkboxes in the latest version of Angular using scss

// adds breaks to the mat-checkboxes with long labels
::ng-deep .mat-checkbox-layout {
    white-space: normal !important;
}

// rather than center the checkbox, put the checkbox in the first line
::ng-deep .mat-checkbox-inner-container {
    margin-top: 3px !important;
}

Facing the same issue mentioned in thread and the above css is not working as expected for edge and mozilla browser. Anyone had it working for edge or mozilla browser?

[ricardosaracino]

@padma2019 my solution was working in ie

[padma2019]

@padma2019 my solution was working in ie

In Edge browser the checkbox text is coming as shown above. I am using Edge browser and not ie. Did anyone has it working in mozilla firefox browser.

[Karasuni]

There hasn't been a reply to this thread as to why it's intended behavior. Looking at the material guidelines there's no mention of this behavior or layout of checkbox labels:
https://material.io/components/selection-controls/#checkboxes

Considering responsive layout a label will not always fit on a smaller screen and line-wrapping or ellipsis would be expected.

[PeymanKhodadust]

Thank you @ricardosaracino. ::ng-deep helped me overcome the view encapsulation of the mat-checkbox component. But still, I find it unblievable that the current behaviour seems to be intended by the material-angular team. Makes no sense to me...

[raiden99]

I was having the same issue when trying to add a confirmation checkbox at the bottom of a from on a mobile view. We were able to get around it using this in our theme:

.mat-checkbox-layout { white-space: normal !important; }

This workaround does not work on IE 11, any suggestions?

[ravindranathakila]

FWIW, you can also put <br/>

[nicholas-davis]

Perfect for fixed width dialog, Thank you @ravindranathakila

https://github.com/angular/components/issues/8416#issuecomment-586563242

[Qarun-Qadir-Bissoondial]

@jelbourn any news as to why this is the intended behaviour? I'm having the same issue and using @egavard's answer as a workaround

[nagarajan-ramalingam]

Setting the following margin, fixes the alignment issue when the label wraps.

.mat-checkbox-inner-container {
margin: 5px 8px 5px auto !important;
}

[spock123]

.mat-checkbox-layout { white-space: normal !important; }

I know this won't help you but I ended up not supporting IE at all - best thing we ever did.
Never heard any complaints :) :)

[bradtaniguchi]

My fix doesn't require !important, is "opt-in" on the mat-checkbox and only requires an update to the project's scss.

This doesn't work if you add it to a component scss file.

<mat-checkbox class="text-wrap">
<!-- super long text -->
</mat-checkbox>

// project's scss, IE styles.scss

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