Components: wrapping of value of md-radio-button

[codejith]

How to wrap md-radio-button value ? Is there an option available ? I tried some css tricks but it seems to be not working for md-radio-button

Bug, feature request, or proposal:

What is the expected behavior?

{{data}}

label {
word-wrap: break-word;
width: 200px;md-radio-button
}

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

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

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

Is there anything else we should know?

[joejordanbrown]

@codejith

That because .md-radio-label has white-space: nowrap;

Using the following should allow words to wrap but you may need to add other styles to .md-radio-label-content for the text to align correctly on wrapping content.

.md-radio-label {
    white-space: normal;
}

[jelbourn]

We think that not wrapping is the most sensible default behavior; you should be able to override the css as @joejordanbrown mentioned.

[mustafaekim]

I dont understand why no-wrapping is default behaviour. If the text is long enough, it goes out of screen! Moreover, it is not the default behaviour in md-checkbox.

[mist3r3]

Hi same here... I don't get why it should be... I didn't succeed in modifying it using css.

[ajsworton]

You can alter the wrap behaviour using:

.mat-radio-label>.mat-radio-label-content {
    white-space: normal;
    margin-left: 30px;
}

.mat-radio-label>.mat-radio-container {
    position: absolute;
}

[srix55]

@aworton That didn't work. Tried many combinations. The only thing that even selected the label was '.mat-radio-button'. I did open a new issue #6671 . Using plunk - http://plnkr.co/edit/PS09vZVKMQxIMLd72mSS?p=preview

[andlcool]

I have the same issue with checkbox not wrapping.

Tried modifying the css classes but nothing worked. What worked for me after inspirations from the replies to #6671. I believe could work for radio button too.

 <md-checkbox >
      <span class="checkbox-text-wrap">
          Create an organisation (upon completion, your progress will be 50%)
      </span>
 </md-checkbox>

CSS:

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

[JPLosardo]

I think you should use ::ng-deep

https://angular.io/guide/component-styles#special-selectors

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

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