fix(toolbar): add a min-width to the toolbar content so that it won't…

… overlap buttons fixes #5657
ionic-team · Mar 1, 2016 · 5fb1e08 · 5fb1e08
1 parent 5ca2a55
commit 5fb1e08
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
@@ -2,6 +2,22 @@
   <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
 </ion-toolbar>
 
+<ion-toolbar>
+  <ion-buttons start>
+    <button>
+      <ion-icon name="contact"></ion-icon>
+    </button>
+    <button>
+      <ion-icon name="search"></ion-icon>
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary>
+      <ion-icon name="more"></ion-icon>
+    </button>
+  </ion-buttons>
+  <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
+</ion-toolbar>
 
 <ion-toolbar>
   <ion-buttons start>
@@ -207,4 +223,4 @@
   .toolbar {
     border-bottom: 1px solid black;
   }
-</style>
+</style>
diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss
@@ -57,6 +57,7 @@ ion-navbar-section {
 .toolbar-content {
   flex: 1;
   order: map-get($toolbar-order-ios, content);
+  min-width: 0;
 }
 
 .toolbar-title {

diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
@@ -52,6 +52,7 @@ ion-navbar-section {
   flex: 1;
   order: map-get($toolbar-order-md, content);
   max-width: 100%;
+  min-width: 0;
 }
 
 .toolbar-title {