Problem with ion-toolbar bottom in IOS emulator

Ionic Framework Ionic Vue
1

Hi,

I’m new to Ionic and have a problem that I can’t figure out. I am using ion-tool bar bottom on my application. In the browser it works as it should, but on Xcode’s emulator it is not visible on iPhones newer than 8.

code:

  
<template>
  <ion-page>
   <ion-content>
        ...
   </ion-content>

    <!-- Tabs bottom page -->
    <ion-toolbar>
      <ion-tabs>
 <!-- had to add this for the toolbar to work in the browser -->
        <ion-router-outlet></ion-router-outlet> 
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="home" href="/home">
            <ion-icon :icon="homeOutline"></ion-icon>
            <ion-label>Hjem</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="comment"
            @click="loggedIn ? isCommentModalOpen = true : toastMessage('You need to log-in to access this', alertOutline, 'danger')">
            <ion-icon :icon="chatboxOutline"></ion-icon>
            <ion-label>Kommenter</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="weather" @click="isWeatherModalOpen = true">
            <ion-icon :icon="partlySunnyOutline"></ion-icon>
            <ion-label>Værvarsel</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="location" @click="createMap">
            <ion-icon :icon="locationOutline"></ion-icon>
            <ion-label>Kart</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-toolbar>
  </ion-page>
</template>

I’ve tried wrapping everything inside ion-footer and adding ion-toolbar inside content, but that doesn’t help.

Anyone know what the problem is?

Setup:
“@capacitor/app”: “4.0.1”,
“@capacitor/core”: “4.1.0”,
“@capacitor/ios”: “4.1.0”,

"vue": "^3.2.21",

"@ionic/vue": "^6.0.0",

v16.17.0 - Node
2

Any ideas on this one guys?

3

Tabs are really for navigating to 3 sections of an app. Seems like you should just make a ion-toolbar > ion-buttons > ion-button that display your modal or do some action.

Have you also tried to more closely match the vue tabs starter? My fork (with Vite) is here: ionic-tabs-vite/TabsPage.vue at c81ae8f181535db28c880ed40124db5d260e8deb · dolthead/ionic-tabs-vite · GitHub

4

thank you for reply.

the way I use it in the example above is exactly the same as what I can see on the link I get from you.

As I said, the problem is not that it does not work in the browser. The problem is with the emulator in Xcode.

It seems that it occurs because of the safe area at the bottom of the new iPhones. Iphone 8 doesn’t have it. Most likely it works well on iphone 8 because of that