Ionic Vue Taskbar. Button behind taskbar

Hi. I am new to Ionic and using Vue.js. I am trying to style my taskbar but the middle button is being cut by the taskbar. Increasing the taskbar height is not asn option as that will take up content space from the page. I followed some tutorial (https://stackoverflow.com/questions/60578210/ionic-4-tabs-how-to-create-custom-tabs) which is based on Ionic Angular but haven’t gotten one on Ionic Vue.

My code is below

<template>
  <ion-page>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="home" />
          <ion-label>Home</ion-label>
        </ion-tab-button>
          
        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <ion-icon :icon="add" />
          <ion-label>Add</ion-label>
        </ion-tab-button>
        
        
        <ion-tab-button tab="tab2" href="/tabs/tab2" >
          <ion-icon :icon="add" class="middle-btn"/>
        </ion-tab-button>
       
        
        <ion-tab-button tab="tab3" href="/tabs/tab3">
          <ion-icon :icon="person" />
          <ion-label>Account</ion-label>
        </ion-tab-button>


          <ion-tab-button tab="tab4" href="/tabs/tab4">
          <ion-icon :icon="cog" />
          <ion-label>Profile</ion-label>
        </ion-tab-button>

      </ion-tab-bar>
    </ion-tabs>

  </ion-page>
</template>

<script>
import {IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage } from '@ionic/vue';
import { add, home, person, cog} from 'ionicons/icons';

export default {
  name: 'Tabs',
  components: {IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
  setup() {
    return {
      add, 
      home, 
      person,
      cog,
      }
  }
}
</script>


<style scoped>

ion-tab-bar{
  justify-content: center;
  border: 0;
  border-radius: 10px 10px 0 0;
  background-color:#e8e8e8 !important;
  border-top:1px solid #ffffff;
  border-bottom:none;
  border-left:none;
  border-right:none;
}

ion-tab-button{
  background: #150249 !important;
}

ion-icon{
  color: #ffffff;
  font-size: 20px;
}

ion-label{
  color: #ffffff;
  font-size:12px;
}


.middle-btn{
  border-radius: 50% !important;
  color:#ffffff;
  background: #000000 !important;
  border:4px solid #f8f8f8;
  font-size: 3px;
  width: 45px !important;
  height: 45px !important;
  box-shadow: 0 300px 400px 0 #ffffff;
  position: absolute !important;
  margin-top: -80px !important;
  padding: 16px !important;
  border-radius: 50% !important;
  }

</style>

The Output is as below

Screenshot 2021-01-06 at 19.08.35343×507 11.5 KB

Required output should be

1 post - 1 participant

Read full topic