Adding ion-tab-bar on to google maps at the bottom

@anujpunia wrote:

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 -

Error1.png2368x1268 349 KB

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 -

error1.JPG396x686 64.9 KB

Posts: 1

Participants: 1

Read full topic