Ion-toolbar components overlapping each other in iOS

Ionic Framework ionic-v3
1

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:

  • one ion-navbar that contains ion-title and some buttons in header area (ion-buttons)

  • and one ion-toolbar which contains one ion-searchbar and one ion-segment.

This works absolutely fine in Android. The problem is only in iOS.

In iOS, ion-toolbar, the ion-segment is overlapping ion-serachbar. Screenshot below:image

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

I tried reducing the padding/margin/both and also completely removing them (no-padding, 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.

  1. Is having two ion-toolbars a right approach? Asking it because it works absolutely fine in Android with both components inside one ion-toolbar.

  2. If two ion-toolbars is indeed an answer then could somebody please help me reducing/removing:

  • the space (padding/margin) between two ion-toolbars

  • then the space (padding/margin) above ion-segment that is in the second ion-toolbar.

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>

Thank you!

1 Like
2

Hi All,

Would appreciate if somebody can suggest or give some pointers on my problem above.

Thanks!

3

First off don’t you think that’s a lot of elements sitting on top of each other :slight_smile:? Two toolbars is in fact the right approach. If you dynamically add or remove them from the dom, calling content.resize() then for example can recalculate the content accordingly. So yes, those toolbars are the right approach. If you just want the toolbars to sit closer to each other, you can fix that with some css.

If you inspect the ion-toolbar on iOS, you’ll see a classname .toolbar .toolbar-ios . That’s the one you want to alter. If you only want to alter that specific toolbar, add a class to it. Something like this:<ion-toolbar class="myToolbar"></ion-toolbar>

now in your CSS do this:

.myToolbar.toolbar.toolbar-ios {
    padding: 0;
    min-height: 30px;
}

I think it’s better to rethink the design of adding that much items on top of each other (maybe you can do the searchbar in your header for example), but the other way is the CSS approach.

2 Likes
4

@luukschoen - thanks for your reply and suggesting the right approach, appreciated!

Both components (ion-searchbar and ion-segment) are indeed in the header.
The reason I went with this design is because I wanted to have both components accessible all the time. In other words, both will be visible even if the list below is scrolled. So at any point in time if the user wants to just view the list for a particular type then can use the ion-segment's one of the 3 buttons. And at the same time, they will be able to narrow down the list (list shown after whatever segment button they have clicked/tapped on) by using ion-searchbar.

I keep forgetting that I can inspect the components to find out which exact CSS classnames being used.

Thanks again for your help!

1 Like