This is in relation to my this question posted previously and it’s response.
To start with, briefly explained, in my Ionic 2 app inside an
ion-header, I have two components:
ion-titleand some buttons in header area
ion-toolbarwhich contains one
This works absolutely fine in Android. The problem is only in iOS.
ion-segment is overlapping
ion-serachbar. Screenshot below:
So as suggested by @Sujan12, I added two
ion-toolbars one after other; One for
ion-searchbar and one for
ion-segment component respectively. Now the
ion-segment is not overlapping the
ion-searchbar but there is a lot of space between them. This is how it looks with two separate ion-toolbars.
I tried reducing the padding/margin/both and also completely removing them (
no-margin attributes) but nothing has worked.
I have two questions; would appreciate if you could provide insight on the first and provide a solution for second.
Is having two ion-toolbars a right approach? Asking it because it works absolutely fine in Android with both components inside one ion-toolbar.
If two ion-toolbars is indeed an answer then could somebody please help me reducing/removing:
the space (padding/margin) between two
then the space (padding/margin) above
ion-segmentthat is in the second
The current code looks like this:
<ion-header> <ion-navbar color="appgrey"> <button ion-button menuToggle icon-only icon-left > <ion-icon name="menu" persistent="true"></ion-icon> </button> <ion-title>Stores</ion-title> </ion-navbar> <ion-toolbar> <ion-searchbar placeholder="Search" [(ngModel)]="queryText" (ionInput)="updateStoresBySearch($event)"> </ion-searchbar> </ion-toolbar> <ion-toolbar > <ion-segment color="primary" [(ngModel)]="storeFilter" (ionChange)="filterStores($event)"> <ion-segment-button value="all"> All </ion-segment-button> <ion-segment-button value="offline"> Offline </ion-segment-button> <ion-segment-button value="online"> Online </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>