diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 9b336f5fa8..f48f77ca7a 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -49,14 +49,14 @@ ion-item-group {
display: block;
}
-ion-item-group-title {
+ion-item-divider {
display: block;
min-height: 30px;
font-weight: 500;
width: 100%;
z-index: 1000;
- &.sticky {
+ &[sticky] {
position: -webkit-sticky;
position: sticky;
top: 0px;
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 990e28dbbf..bc3ca3d54c 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -32,12 +32,6 @@ $item-ios-sliding-transition: transform 250ms ease-in-out !default;
ion-item-group {
- ion-item-group-title {
- padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
- background-color: $item-ios-divider-bg;
- color: $item-ios-divider-color;
- }
-
.item:first-child {
.item-inner {
border-top-width: 0;
@@ -50,6 +44,12 @@ ion-item-group {
}
}
+ion-item-divider {
+ padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+ background-color: $item-ios-divider-bg;
+ color: $item-ios-divider-color;
+}
+
ion-note {
color: $item-ios-note-color;
}
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 30bff925ec..34e75f3920 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -33,7 +33,7 @@ $item-md-sliding-content-bg: $background-color !default;
$item-md-sliding-transition: transform 250ms ease-in-out !default;
-ion-item-group-title {
+ion-item-divider {
padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
background-color: $item-md-divider-bg;
color: $item-md-divider-color;
diff --git a/ionic/components/item/test/dividers/index.ts b/ionic/components/item/test/dividers/index.ts
new file mode 100644
index 0000000000..43aed36502
--- /dev/null
+++ b/ionic/components/item/test/dividers/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class E2EApp {}
diff --git a/ionic/components/item/test/dividers/main.html b/ionic/components/item/test/dividers/main.html
new file mode 100644
index 0000000000..597d066165
--- /dev/null
+++ b/ionic/components/item/test/dividers/main.html
@@ -0,0 +1,59 @@
+Item Divider
+
+
+
+
+ Plain Ol' div with some text
+
+
+
+ Single line text that should have ellipses when it doesn't all fit in the item
+
+
+
+ Item Divider
+
+
+
+ Multiline text that should wrap when it is too long
+ to fit on one line in the item. Attribute on .item
+
+
+
+ H1 Title Text
+ Paragraph line 1
+
+
+
+ H2 Title Text
+ Paragraph line 1
+
+
+
+
+
+ H3 Title Text
+ Paragraph line 1
+ Paragraph line 2
+
+
+
+ H4 Title Text
+ Paragraph line 1
+ Paragraph line 2
+ Paragraph line 3
+
+
+
+
+ Column 1
+
+
+ Column 2
+
+
+ Column 3
+
+
+
+
diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html
index b49983673c..90113a9cbe 100644
--- a/ionic/components/item/test/groups/session-list.html
+++ b/ionic/components/item/test/groups/session-list.html
@@ -10,9 +10,9 @@
-
+
{{timeSlot.time}}
-
+