Some of the pages in my app has a ion-navbar
along with an ion-toolbar
inside an ion-header
. And in the ion-toolbar
I have a ion-searchbar
and an ion-segment
.
In all the places where I have ion-searchbar
and ion-segment
inside an ion-toolbar
, both the components are getting overlapped. The ion-segment
is overlapping ion-searchbar
.
This happens only in iOS. Not in Android.
iOS Screenshot:
Android Screenshot:
While searching for a solution, I came across this link. Following what it said, I tried resizing the content of the page but that has not worked.
Can somebody provide a solution or some pointers on what I need to do to resolve this iOS issue?
-------------- EDIT: --------------
Below is my ion-header
code:
<ion-header>
<ion-navbar color="appgrey">
<ion-title>Store(s)</ion-title>
<ion-buttons end>
<button ion-button (click)="showPopover($event)">
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar>
<ion-searchbar placeholder="Search"
[(ngModel)]="queryText"
(ionInput)="updateStoresBySearch($event)">
</ion-searchbar>
<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>
Thanks.