I am having an issue with the tabs bar not showing on a device when using slot=“bottom”. If I switch the slot to top everything shows without any problems.
I have tried using ionic serve and everything works as expected. The tabs page and children do not have any extra code or CSS and I have removed the global styles to check that nothing is accidentally interfering with it.
Here is my tabs page Html:
<ion-tabs> <ion-tab-bar slot="bottom" color="primary"> <ion-tab-button tab="reasons"> <ion-icon name="home"></ion-icon> <ion-label>Reasons2</ion-label> </ion-tab-button> <ion-tab-button tab="reasons-user"> <ion-icon name="apps"></ion-icon> <ion-label>Favourites</ion-label> </ion-tab-button> <ion-tab-button tab="reasons-upload"> <ion-icon name="settings"></ion-icon> <ion-label>Upload</ion-label> </ion-tab-button> </ion-tab-bar> </ion-tabs>
My idea is that it’s somehow being pushed off the bottom of the screen as slot=“top” is working fine, but maybe I’m missing something else?
I tried adding the above tabs code directly to the three tabs content pages and this does display when on a device. However, the highlighting and click effects do not work.
I then tried adding the code to the tabs page and tabs content pages at the same time. This resulted in one tab bar showing when on a device, but when viewed using chrome://inspect/#devices I see both of the tab bars.