fix(toolbar): position toolbar relative and add z-index

src/components/app/structure.scss

@@ -18,7 +18,7 @@ $z-index-navbar-section:         10;
 $z-index-page-container:         0;
 $z-index-selected-tab:           1;
 $z-index-toolbar:                10;
-$z-index-toolbar-background:     -1;
+$z-index-toolbar-background:     0;
 
 $z-index-toolbar-border:         20;
 $z-index-list-border:            50;
@@ -183,6 +183,11 @@ ion-header {
   width: 100%;
 }
 
+ion-toolbar {
+  position: relative;
+  z-index: $z-index-toolbar;
+}
+
 ion-footer {
   position: absolute;
   bottom: 0;

src/components/toolbar/test/colors/main.html

@@ -1,9 +1,9 @@
 
+<ion-content>
   <ion-toolbar>
     <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -24,7 +24,6 @@
     <ion-title>Default</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar primary>
     <ion-buttons start>
       <button showWhen="ios">
@@ -42,7 +41,6 @@
     <ion-title>Primary</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar primary>
     <ion-buttons start>
       <button cla showWhen="ios"ss="activated">
@@ -60,7 +58,6 @@
     <ion-title>Primary.activated</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar secondary>
     <ion-buttons start>
       <button solid>
@@ -80,7 +77,6 @@
     </ion-buttons>
   </ion-toolbar>
 
-
   <ion-toolbar secondary>
     <ion-buttons start>
       <button solid class="activated">
@@ -100,7 +96,6 @@
     </ion-buttons>
   </ion-toolbar>
 
-
   <ion-toolbar dark>
     <ion-buttons start>
       <button outline>
@@ -119,7 +114,6 @@
     <ion-title>Dark</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar dark>
     <ion-buttons start>
       <button outline class="activated">
@@ -138,7 +132,6 @@
     <ion-title>Dark.activated</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar danger>
     <ion-buttons start>
       <button>
@@ -155,7 +148,6 @@
     <ion-title>Danger</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar danger>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -184,7 +176,6 @@
     <ion-title>Light</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar light>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -197,7 +188,6 @@
     <ion-title>Light</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar transparent>
     <ion-buttons end>
       <button #button1 (click)="buttonClick(button1)">
@@ -209,10 +199,4 @@
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-toolbar>
-
+</ion-content>
-
-<style>
-  .toolbar {
-    border-bottom: 1px solid black;
-  }
-</style>

src/components/toolbar/test/scenarios/main.html

@@ -1,3 +1,5 @@
+
+<ion-content>
   <ion-toolbar>
     <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
   </ion-toolbar>
@@ -36,7 +38,6 @@
     <ion-title>Defaults</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button class="activated">
@@ -54,7 +55,6 @@
     <ion-title>Defaults.activated</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button solid>
@@ -74,7 +74,6 @@
     </ion-buttons>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <a button solid class="activated">
@@ -94,7 +93,6 @@
     </ion-buttons>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button outline>
@@ -113,7 +111,6 @@
     <ion-title>Outline</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button outline class="activated">
@@ -132,7 +129,6 @@
     <ion-title>Outline.activated</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button>
@@ -162,7 +158,6 @@
     <ion-title>Text Only</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -175,7 +170,6 @@
     <ion-title>Left side menu toggle</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons end>
       <button #button1 (click)="buttonClick(button1)">
@@ -217,10 +211,4 @@
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
-
+</ion-content>
-
-<style>
-  .toolbar {
-    border-bottom: 1px solid black;
-  }
-</style>

src/components/toolbar/toolbar.scss

@@ -1,9 +1,9 @@
 @import "../../globals.core";
 
+
 // Toolbar
 // --------------------------------------------------
 
-
 .toolbar {
   display: flex;
   overflow: hidden;
@@ -67,6 +67,7 @@ ion-buttons div {
   pointer-events: auto;
 }
 
+
 // Transparent Toolbar
 // --------------------------------------------------
 
@@ -84,6 +85,7 @@ ion-buttons,
   transform: translateZ(0);
 }
 
+
 // Navbar
 // --------------------------------------------------
 

src/components/virtual-scroll/test/basic/main.html

@@ -1,5 +1,4 @@
 <ion-header>
-
   <ion-navbar>
     <ion-title>Virtual Scroll{{webview}}</ion-title>
     <ion-buttons end>
@@ -8,7 +7,6 @@
       </button>
     </ion-buttons>
   </ion-navbar>
-
 </ion-header>
 
 

src/components/virtual-scroll/test/cards/main.html

@@ -1,4 +1,8 @@
-<ion-toolbar><ion-title>Virtual Scroll: Cards</ion-title></ion-toolbar>
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Virtual Scroll: Cards</ion-title>
+  </ion-toolbar>
+</ion-header>
 
 <ion-content>
 

src/components/virtual-scroll/test/image-gallery/main.html

@@ -1,39 +1,4 @@
-<style>
-  .virtual-header {
-    width: 100%;
-    margin-bottom: 5px;
-    padding: 10px;
-    background: #eee;
-  }
-  .virtual-item {
-    display: inline-block;
-    vertical-align: top;
-    width: 80px;
-    height: 80px;
-    margin-left: 5px;
-    margin-bottom: 5px;
-    border: 1px solid gray;
-  }
-  .virtual-footer {
-    display: inline-block;
-    width: 80px;
-    height: 80px;
-    border: 1px solid red;
-    margin-left: 5px;
-    margin-bottom: 5px;
-    padding: 10px;
-  }
-  .virtual-scroll > :first-child {
-    border-top: 2px solid blue;
-  }
-  .virtual-scroll > :last-child {
-    background: red;
-  }
-</style>
-
-
 <ion-header>
-
   <ion-navbar>
     <ion-title>Virtual Scroll: Image Gallery</ion-title>
     <ion-buttons end>
@@ -42,7 +7,6 @@
       </button>
     </ion-buttons>
   </ion-navbar>
-
 </ion-header>
 
 
@@ -75,3 +39,35 @@
 
 </ion-content>
 
+<style>
+  .virtual-header {
+    width: 100%;
+    margin-bottom: 5px;
+    padding: 10px;
+    background: #eee;
+  }
+  .virtual-item {
+    display: inline-block;
+    vertical-align: top;
+    width: 80px;
+    height: 80px;
+    margin-left: 5px;
+    margin-bottom: 5px;
+    border: 1px solid gray;
+  }
+  .virtual-footer {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    border: 1px solid red;
+    margin-left: 5px;
+    margin-bottom: 5px;
+    padding: 10px;
+  }
+  .virtual-scroll > :first-child {
+    border-top: 2px solid blue;
+  }
+  .virtual-scroll > :last-child {
+    background: red;
+  }
+</style>

src/components/virtual-scroll/test/sliding-item/main.html

@@ -1,5 +1,4 @@
 <ion-header>
-
   <ion-navbar>
     <ion-title>Virtual Scroll{{webview}}</ion-title>
     <ion-buttons end>
@@ -8,7 +7,6 @@
       </button>
     </ion-buttons>
   </ion-navbar>
-
 </ion-header>
 
 

src/components/virtual-scroll/test/variable-size/main.html

@@ -1,4 +1,8 @@
-<ion-toolbar><ion-title>Virtual Scroll: Variable Sizes</ion-title></ion-toolbar>
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Virtual Scroll: Variable Sizes</ion-title>
+  </ion-toolbar>
+</ion-header>
 
 <ion-content>