Tabs within `ion-content` (iOS issue)


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:

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

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.


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.

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

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

    <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-buttons slot="end">
      <img class="logo" alt="Logo" item-right src="./assets/images/logo.png" />

    <ion-tab-bar slot="top">
      <ion-tab-button selected tab="news">
        <ion-icon name="news"></ion-icon>
      <ion-tab-button tab="alerts">
        <ion-icon name="alerts"></ion-icon>

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

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

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