Skip to content

Commit

Permalink
fix(checkbox): label content should not wrap
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
devversion authored and jelbourn committed Aug 30, 2017
1 parent 43b7c34 commit d469c71
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/lib/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
align-items: baseline;
vertical-align: middle;
display: inline-flex;
white-space: nowrap;
}

.mat-checkbox-inner-container {
Expand Down
5 changes: 4 additions & 1 deletion src/lib/radio/radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,12 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
.mat-radio-container {
box-sizing: border-box;
display: inline-block;
height: $mat-radio-size;
position: relative;
width: $mat-radio-size;
height: $mat-radio-size;
// The radio container is inside of a inline-flex element and may shrink if the label
// is wide and text-wrapping is enabled.
flex-shrink: 0;
}

// The outer circle for the radio, always present.
Expand Down

0 comments on commit d469c71

Please sign in to comment.