Tabs within `ion-content` (iOS issue)

Ionic Framework
1

Hello!

I’m trying to display an ion-tabs component within an ion-content component. I know this is probably a non-standard use of the component but I want to display the toolbar at the top and the tabs beneath that, it works perfectly doing it this way in the browser:

Screen Shot 2022-08-30 at 15.47.44
Screen Shot 2022-08-30 at 15.47.441372×1806 142 KB

The issue arrises when I run the same code in the iOS simulator, I get this behaviour instead:

Screen Shot 2022-08-30 at 15.53.36
Screen Shot 2022-08-30 at 15.53.36854×1686 104 KB

See the space between the toolbar and the tabs, I’m not sure why this is occurring or how to resolve it, would appreciate some help if anyone has any advice.

Cheers!
Simon

2

I’ve come up with a workaround, this must be a bug with the iOS platform specifically as this does not occur on Android or in the browser.

.ios ion-tab-bar {
  margin-top: -50px;
}

Pretty annoying.

3

Are you using the slot="top" with your tabs?

4

Yes I am using slot="top", view code contains nothing unusual:

<ion-header>
  <ion-toolbar>
    <ion-title>News & Alerts</ion-title>
    <ion-buttons slot="start">
      <ion-back-button *ngIf="outlet.canGoBack(); else menu"></ion-back-button>
      <ng-template #menu>
        <ion-menu-button></ion-menu-button>
      </ng-template>
    </ion-buttons>
    <ion-buttons slot="end">
      <img class="logo" alt="Logo" item-right src="./assets/images/logo.png" />
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="top">
      <ion-tab-button selected tab="news">
        <ion-icon name="news"></ion-icon>
        <ion-label>News</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="alerts">
        <ion-icon name="alerts"></ion-icon>
        <ion-label>Alerts</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

I had to put the tabs within ion-content because otherwise they positioned at the top of the page above the toolbar.

5

I’d recommend using an ion-segment for what you are trying to accomplish.

6

It did work with the fix I mentioned above so for now I’ll just continue with that.

7

For whoever else encounters this same problem, I found that Ionic was specifying padding-top to the ion-tab-bar element for native iOS builds, presumably to avoid the notch or camera at the top of the screen. I was hesitant to specify a negative margin-top, because different devices might have different notch sizes. A solution that renders properly for all platforms would be:

ion-content ion-tab-bar[slot=top] {
    padding-top: 0 !important;
}

Not sure if the !important is needed but it guarantees the 0 padding in case Ionic changes how specific their selectors are.