Radio-button label doesn't wrap by default, unlike check-box label. Couldn't make it wrap with CSS either. #6671
Assignees
Comments
|
You can make your style global and apply it to your radio: <md-radio-button class="myClass"></md-radio-button>Where .myClass > label {
white-space: normal;
} |
devversion
added a commit
to devversion/material2
that referenced
this issue
Aug 28, 2017
* Similar as for the radio component, the checkbox label content should not wrap if it exceeds the boundaries of the parent element. This ensures that we have consistent behavior across all selection controls. * Fixes that the radio container (circle) shrinks if the label content is exceeding the boundaries and wrapping is enabled (developers may overwrite CSS to enable wrapping) Closes angular#6671
jelbourn
pushed a commit
that referenced
this issue
Aug 30, 2017
* Similar as for the radio component, the checkbox label content should not wrap if it exceeds the boundaries of the parent element. This ensures that we have consistent behavior across all selection controls. * Fixes that the radio container (circle) shrinks if the label content is exceeding the boundaries and wrapping is enabled (developers may overwrite CSS to enable wrapping) Closes #6671
jelbourn
pushed a commit
that referenced
this issue
Sep 1, 2017
* Similar as for the radio component, the checkbox label content should not wrap if it exceeds the boundaries of the parent element. This ensures that we have consistent behavior across all selection controls. * Fixes that the radio container (circle) shrinks if the label content is exceeding the boundaries and wrapping is enabled (developers may overwrite CSS to enable wrapping) Closes #6671
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Bug, feature request, or proposal:
Bug
What is the expected behavior?
The label should wrap for longer labels
What is the current behavior?
Doesn't wrap. Overflows container.
What are the steps to reproduce?
http://plnkr.co/edit/PS09vZVKMQxIMLd72mSS?p=preview
What is the use-case or motivation for changing an existing behavior?
Radio button labels overflow their card containers and are displayed with an ugly horizontal scrollbar when viewed on a mobile device
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/compiler: 4.3.1
@angular/material: 2.0.0-beta.8-374aaff
Is there anything else we should know?
I tried the solutions related to issue #2019 . Couldn't make it work.
The text was updated successfully, but these errors were encountered: