fix(list): consecutive inset lists with headers

fixes #8412 fixes #6164
ionic-team · Oct 10, 2016 · 93616c4 · 93616c4
1 parent db72a7d
commit 93616c4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss
@@ -79,7 +79,7 @@ $list-ios-header-background-color:    transparent !default;
   margin: 0 auto;
 }
 
-.list-ios + ion-list ion-list-header {
+.list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header {
   margin-top: -$list-ios-margin-top;
   padding-top: 0;
 }

diff --git a/src/components/list/test/inset/main.html b/src/components/list/test/inset/main.html
@@ -18,22 +18,17 @@
     <button ion-fab><ion-icon name="close"></ion-icon></button>
   </ion-fab>
 
-  <ion-list inset>
+  <ion-list inset no-lines>
 
     <ion-list-header>
-      Inset List Header
+      List Header 1
     </ion-list-header>
 
     <a ion-item href="#">
       <ion-icon name="alarm" item-left></ion-icon>
       List Link Item 1
     </a>
 
-    <a ion-item href="#">
-      <ion-icon name="analytics" item-left></ion-icon>
-      List Link Item 2
-    </a>
-
     <ion-item>
       <ion-label>Toggle</ion-label>
       <ion-toggle checked="true"></ion-toggle>
@@ -44,18 +39,42 @@
       <ion-checkbox checked="true"></ion-checkbox>
     </ion-item>
 
-    <button ion-item>
+    <ion-item>
       <ion-icon name="boat" item-left></ion-icon>
       List Button Item 1
-    </button>
+    </ion-item>
+
+  </ion-list>
 
-    <button ion-item>
-      <ion-icon name="book" item-left></ion-icon>
-      List Button Item 2
-    </button>
+  <ion-list inset no-lines>
+      <ion-list-header>
+          List header 2
+      </ion-list-header>
+      <ion-item>
+          <ion-icon name="list" item-left></ion-icon>
+          item 1
+      </ion-item>
+  </ion-list>
 
+  <ion-list>
+    <ion-list-header>
+        List header 3
+    </ion-list-header>
+    <ion-item>
+        <ion-icon name="list" item-left></ion-icon>
+        item 1
+    </ion-item>
   </ion-list>
 
+  <ion-list inset no-lines>
+    <ion-list-header>
+        List header 4
+    </ion-list-header>
+    <ion-item>
+        <ion-icon name="list" item-left></ion-icon>
+        item 1
+    </ion-item>
+  </ion-list>
 
   <ion-list inset>