I am using Ionic4 to build an app around google maps using native maps. Everything works fine except that I am unable to put a tab bar at the bottom of the screen. When I do, it overlaps the whole screen it seems and map becomes non clickable. Following is the html snippet I am using -
<ion-content padding>
<div id="map_canvas">
<ion-searchbar>
</ion-searchbar>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="heart"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="listview">
<ion-icon name="clipboard"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="add-circle">
<ion-icon name="add-circle"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
It seems to works if I remove <ion-tabs>
but then the placement is disturbed. Given below is the image as whats happening -
What am I doing wrong here?
Following seems to work but then the ion-tab-bar
gets a bit hidden at the bottom -
<ion-content padding>
<ion-tabs>
<div id="map_canvas">
<ion-searchbar>
</ion-searchbar>
</div>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="heart"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="listview">
<ion-icon name="clipboard"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="add-circle">
<ion-icon name="add-circle"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
Following is the screen shot -