diff --git a/ionic/components/checkbox/checkbox.ios.scss b/ionic/components/checkbox/checkbox.ios.scss index cb209e9d1a..040aedd6c3 100644 --- a/ionic/components/checkbox/checkbox.ios.scss +++ b/ionic/components/checkbox/checkbox.ios.scss @@ -22,6 +22,12 @@ $checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios- $checkbox-ios-disabled-opacity: 0.4 !default; +ion-checkbox { + position: relative; + display: inline-block; +} + + // iOS Checkbox Outer Circle: Unchecked // ----------------------------------------- @@ -78,6 +84,7 @@ $checkbox-ios-disabled-opacity: 0.4 !default; // ----------------------------------------- .item ion-checkbox { + position: static; display: block; margin: $checkbox-ios-media-margin; } diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss index 9beb24febf..16046ce220 100644 --- a/ionic/components/checkbox/checkbox.md.scss +++ b/ionic/components/checkbox/checkbox.md.scss @@ -26,6 +26,12 @@ $checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !def $checkbox-md-icon-border-color-on: map-get($colors-md, primary) !default; +ion-checkbox { + position: relative; + display: inline-block; +} + + // Material Design Checkbox Outer Square: Unchecked // ----------------------------------------- @@ -82,6 +88,8 @@ $checkbox-md-icon-border-color-on: map-get($colors-md, primary) !default; // ----------------------------------------- .item ion-checkbox { + position: static; + display: block; margin: $checkbox-md-media-margin; } diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts index 751eba08ea..f25c1e455d 100644 --- a/ionic/components/checkbox/test/basic/index.ts +++ b/ionic/components/checkbox/test/basic/index.ts @@ -26,6 +26,7 @@ class E2EApp { this.grapeDisabled = true; this.grapeChecked = true; + this.standAloneChecked = true; } toggleGrapeChecked() { diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html index b7670ad5fa..618fad4b69 100644 --- a/ionic/components/checkbox/test/basic/main.html +++ b/ionic/components/checkbox/test/basic/main.html @@ -48,6 +48,11 @@

+

+ + Stand-alone checkbox: {{standAloneChecked}} +

+