Whenever i click on the Tab Bar on pressing last tab my UI get messed up
this is what my tabbar looks like ^
whenever i click on the Summary Tab my UI get messy as shown in the last ss ^^
my code:
<template>
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" href="/tabs/tab1" @click="setCurrentTab('tab1')">
<!-- <ion-img class="h-6 w-6" :src="currentTab === 'tab1' ? '/fluentmic24filledGreen.svg' : '/fluentmic24filled.svg'" key="tab1"></ion-img>
-->
<ion-icon :icon="languageOutline"></ion-icon>
<ion-label class="mt-1">Text</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" href="/tabs/tab2" @click="setCurrentTab('tab2')">
<ion-icon aria-hidden="true" :icon="micSharp" />
<ion-label>Audio</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3" href="/tabs/tab3" @click="setCurrentTab('tab3')">
<ion-icon :icon="documentTextOutline"></ion-icon>
<ion-label>Document</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4" href="/tabs/tab4" @click="setCurrentTab('tab4')">
<ion-icon :icon="cameraOutline"></ion-icon>
<ion-label>Camera </ion-label>
</ion-tab-button>
<!-- <ion-tab-button tab="tab6" href="/tabs/tab6" @click="setCurrentTab('tab6')">
<ion-icon :icon="refresh"></ion-icon>
<ion-label>History </ion-label>
</ion-tab-button> -->
<ion-tab-button tab="tab5" href="/tabs/tab5" >
<ion-icon :icon="bookOutline"></ion-icon>
<ion-label>Summary </ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
<style scoped>
ion-tab-button[aria-selected="true"] ion-label,
ion-tab-button[aria-selected="true"] ion-icon {
color: red;
background: red;
background-color: red;
}
ion-tab-bar {
--color-selected: darkorange;
--color:black;
background-color: #e0b8d6;
box-shadow: rgba(16, 11, 15, 0.2) 0px 8px 24px;
display:flex;
justify-content: space-around;
}
ion-tab-button[aria-selected="true"] ion-img {
filter: brightness(0) saturate(100%) invert(29%) sepia(95%) saturate(3433%) hue-rotate(204deg) brightness(97%) contrast(100%);
}
ion-tab-button{
background: #FFFBFE;
--padding-start:0px;
--padding-end:0px;
/* flex: 0 0 16%; */
flex-grow: 1;
}
</style>