diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index e2ebc48b0249..7676f48c69f8 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -1,5 +1,6 @@
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index 26a2d2ea5469..196cde2bd044 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -228,6 +228,13 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
}
}
+.mat-checkbox-inner-container-no-side-margin {
+ margin: {
+ left: 0;
+ right: 0;
+ }
+}
+
// TODO(kara): Remove this style when fixing vertical baseline
.mat-checkbox-layout .mat-checkbox-label {
line-height: 24px;
diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts
index 0224157dbda5..e9efe7219bd7 100644
--- a/src/lib/checkbox/checkbox.spec.ts
+++ b/src/lib/checkbox/checkbox.spec.ts
@@ -32,6 +32,7 @@ describe('MdCheckbox', () => {
CheckboxWithNameAttribute,
CheckboxWithChangeEvent,
CheckboxWithFormControl,
+ CheckboxWithoutLabel,
],
providers: [
{provide: ViewportRuler, useClass: FakeViewportRuler}
@@ -436,28 +437,28 @@ describe('MdCheckbox', () => {
it('should apply class based on color attribute', () => {
testComponent.checkboxColor = 'primary';
fixture.detectChanges();
- expect(checkboxDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
+ expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(true);
testComponent.checkboxColor = 'accent';
fixture.detectChanges();
- expect(checkboxDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
+ expect(checkboxNativeElement.classList.contains('mat-accent')).toBe(true);
});
it('should should not clear previous defined classes', () => {
- checkboxDebugElement.nativeElement.classList.add('custom-class');
+ checkboxNativeElement.classList.add('custom-class');
testComponent.checkboxColor = 'primary';
fixture.detectChanges();
- expect(checkboxDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true);
- expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+ expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(true);
+ expect(checkboxNativeElement.classList.contains('custom-class')).toBe(true);
testComponent.checkboxColor = 'accent';
fixture.detectChanges();
- expect(checkboxDebugElement.nativeElement.classList.contains('mat-primary')).toBe(false);
- expect(checkboxDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
- expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+ expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(false);
+ expect(checkboxNativeElement.classList.contains('mat-accent')).toBe(true);
+ expect(checkboxNativeElement.classList.contains('custom-class')).toBe(true);
});
});
@@ -730,7 +731,6 @@ describe('MdCheckbox', () => {
});
});
-
describe('with form control', () => {
let checkboxDebugElement: DebugElement;
let checkboxInstance: MdCheckbox;
@@ -763,6 +763,22 @@ describe('MdCheckbox', () => {
expect(inputElement.disabled).toBe(false);
});
});
+
+ describe('without label', () => {
+ let checkboxDebugElement: DebugElement;
+ let checkboxNativeElement: HTMLElement;
+
+ it('should add a css class to inner-container to remove side margin', () => {
+ fixture = TestBed.createComponent(CheckboxWithoutLabel);
+ fixture.detectChanges();
+ checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
+ checkboxNativeElement = checkboxDebugElement.nativeElement;
+
+ let checkboxInnerContainerWithoutMarginCount = checkboxNativeElement
+ .querySelectorAll('.mat-checkbox-inner-container-no-side-margin').length;
+ expect(checkboxInnerContainerWithoutMarginCount).toBe(1);
+ });
+ });
});
/** Simple component for testing a single checkbox. */
@@ -872,3 +888,9 @@ class CheckboxWithChangeEvent {
class CheckboxWithFormControl {
formControl = new FormControl();
}
+
+/** Test component without label */
+@Component({
+ template: ``
+})
+class CheckboxWithoutLabel {}
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index 0bc2259a3b9f..08da9d6965ed 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -162,6 +162,15 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
/** The native ` element */
@ViewChild('input') _inputElement: ElementRef;
+ @ViewChild('labelWrapper') _labelWrapper: ElementRef;
+
+ /** Whether the checkbox has label */
+ _hasLabel(): boolean {
+ const labelText = this._labelWrapper.nativeElement.textContent || '';
+ return !!labelText.trim().length;
+ }
+
+ /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
@ViewChild(MdRipple) _ripple: MdRipple;
/**