-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
mat-radio-button and mat-checkbox don't line wrap #10954
Comments
@battre I think yout workaround is not very clear. For those who didn't understand in a first moment, like me, what you got to do is let your tag without any content and put your text outside it. E.g.:
This should solve your problem. |
Redefine that style:
|
white-space: normal didn't work. Not sure why. The |
=== styles.css === .mat-checkbox-layout { .mat-radio-label { |
make sure to have your overrides in styles.scss |
This is a (partial) duplicate of #8416 |
doing this, the text will lose the click event that check the radio button. |
Looks like the rendering of my comment has changed. I have escaped all HTML tags with backticks and it should be readable now. |
I solved the problem adding ::ng-deep.
|
Bug, feature request, or proposal:
Proposal: change
<mat-radio-button>
or<mat-checkbox>
to line-wrap its contents by default or add an option.What is the expected behavior?
I can put a text into a
<mat-radio-button>
or<mat-checkbox>
that is longer than what fits into the viewport.What is the current behavior?
The content in a or does not line wrap. If you have a lot of text in a it gets cut at the end.
A workaround would be
<mat-radio-button><span style="white-space: normal;">{{mylongtext}}</span></mat-radio-button>
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-uaeetd?file=app/app.component.html
What is the use-case or motivation for changing an existing behavior?
I have a pretty narrow window and need to put checkboxes and radio buttons in there.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I think all of them.
Is there anything else we should know?
The text was updated successfully, but these errors were encountered: