javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #5657
This commit is contained in:
Brandy Carney
2016-03-01 12:59:29 -05:00
parent 5ca2a55f14
commit 5fb1e08347
3 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ionic/components/toolbar/test/scenarios/main.html
View File

@ -2,6 +2,22 @@
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title> <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar> </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-toolbar>
<ion-buttons start> <ion-buttons start>
@ -207,4 +223,4 @@
.toolbar { .toolbar {
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
</style> </style>

1
ionic/components/toolbar/toolbar.ios.scss
View File

@ -57,6 +57,7 @@ ion-navbar-section {
.toolbar-content { .toolbar-content {
flex: 1; flex: 1;
order: map-get($toolbar-order-ios, content); order: map-get($toolbar-order-ios, content);
min-width: 0;
} }
.toolbar-title { .toolbar-title {

1
ionic/components/toolbar/toolbar.md.scss
View File

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