0

I have an Ionic 6 app with Vue3. I am using the tabs component in my app.

My App.vue is as follows

    <template>
      <ion-app>
        <ion-router-outlet />
      </ion-app>
    </template>

I have a tabs page MemberPage.vue as follows with a header component to dynamically display the route name

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>{{ route.name }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-tabs v-if="member_profile">
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom" color="primary">
        <ion-tab-button :tab="tab.name" :href="tab.path" v-for="tab in member_tabs" :key="tab.name">
          <ion-icon aria-hidden="true" :icon="tab.icon" />
          <ion-label>{{ tab.name }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

I have individual pages for the tab routes with the following structure of components

<template>
  <ion-page>
    <ion-content v-if="dataLoaded">
      some other components
    </ion-content>
  </ion-page>
</template>

With the above code, the toolbar title does not appear in the app and also notice how tabs too close to the rounded corners of the device and cut as you can see in the image below.

How can i address this ?

The header is displayed correctly in the Android App. I have put the app on test flight and checked on a physical ios Device as well, and thus not an issue with emulator as well.

deviceimage

thezohaan
  • 324
  • 1
  • 10
  • You could give the tabbar an padding-bottom of 0 + --ion-safe-area-bottom. And do something simulair for the header. See https://ionicframework.com/docs/v6/theming/advanced#application-variables – SilentLucidity May 03 '23 at 11:50
  • @SilentLucidity i will try to figure out how to do that. But in this case it might affect both android and ios right. my android displays are ok. it seems to be a problem only with ios and i assume standard tabbar and tabs component would work correct and maybe i am going wrong elswehere. – thezohaan May 03 '23 at 12:09
  • edit: moved reaction to seperate answer to be able to use markdown. See https://stackoverflow.com/a/76163736/4142701 – SilentLucidity May 03 '23 at 12:16
  • I missed your other remark. React Native and Flutter have some safeareaview but I don't think Ionic has something. So when you don't use a container that is aware of bottom navigation and camera holes, it will draw other elements over your camera and navigation. – SilentLucidity May 04 '23 at 07:29

1 Answers1

0

@thezohaan in most cases 'ion-safe-area-bottom' will be 0 on those android devices, and therefore won't change anything. But you can always apply styles to ios-only using ios class selectors. in your css you need to target the tabbar class and add a ios class to it. Something like this:

.tabbarclass .ios{
    padding-bottom: 0 + --ion-safe-area-bottom;
}

see: https://ionicframework.com/docs/theming/platform-styles

SilentLucidity
  • 340
  • 1
  • 16