Ion-toolbar components overlapping each other in iOS. Works fine in Android

Ionic Framework ionic-v3
1

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:
image

Android Screenshot:
image

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.

2

Can you provide a code sample of what you have?

3

Thanks for looking into it @Sujan12!

I have edited my original post to add the ion-header code. Please do have a look when you get a chance.

1 Like
4

@Sujan12 - just checking if you have any suggestions.

Would appreciate if somebody can provide any solution, suggestions, pointers on what I need to do to get this issue resolved.

Thanks.

5

I have no practical experience with this at all. Looking at your code, is it possible to have two ion-toolbars under each other? See here: https://ionicframework.com/docs/api/components/toolbar/Toolbar/#usage

6

@Sujan12 - Yes and I tried it, having two ion-toolbars after ion-navbar inside my ion-header. It works. However, there is a lot of space (padding and/or margin) between theion-searchbar and ion-segment. I tried reducing the padding/margin/both and completely removing them (no-padding, no-margin) but nothing worked. So dropped that idea.

7

I would revisit that - looks like the "correct"er code hierachy to me.

Create another topic here to ask for help removing the margin - I am pretty sure this is possible.