From 14095e9b4a06b850c704594fd6e85f1e55d048af Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 28 Aug 2017 12:21:07 +0200 Subject: [PATCH] fix(checkbox): label content should not wrap * 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 --- src/lib/checkbox/checkbox.scss | 1 + src/lib/radio/radio.scss | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 57752e0ea812..c591b1be75fe 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -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 { diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index cffb3b237ce7..9ccd2b679c57 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -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.