Skip to content

mat-radio-button and mat-checkbox don't line wrap #10954

Open

Description

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    GThis is is related to a Google internal issueP4A relatively minor issue that is not relevant to core functionsarea: material/checkboxarea: material/radio

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions